ا 


web 2.0 
xhtml css 
jquery ajax 

Rss 
شرح الأستاذ‎ 
vVista-design 


برعايت موقع مُطور التطويرى 


WWW .mtwer.conn / vb 


YISTA-DESIGN 


ترتيب وجخميع الكتاب 


العلم نور 


بسم الله الرحمن الرحيم 


فهرس دورة0 .2 W۵٥5‏ 


-متطابات الدورة من برامج قبل أن تبدأالتطبيق 

- مقد مة وفهرس دورة تصميم المواقع المتطور بأسلوب 2.0 اعم 

- [الدرس الأول] تعريف بمفهوم الأسلوب المتطورفي تصميم المواقع 2.0 اع 

- [الدرس الثانى] مقد مةفى كك + )"۸ ×الجزءالأول 

- [الدرس الثالث] مقد مةفی 5ء٤‏ + ×۸٣)‏ الجزءالثانی 

- [الدرس الرايع ]أساسيات مهمة فى استخدام كءكءc+ xh")‏ 

- [الدرس الخامس] دروس فيد يو مكثفة متعددة المستويات لاتعامل مع كك 
- [الدرس السادس] كيفية عمل تخطيط لصفجة ا ۷0| تمهيد| لتصمیمها ب °55 
- [الدرس السايع ] شرح كيفية عمل القوائم المتجركة والمتعددة 5ا €۸" ؟؟°5 
- [الدرس الثامن |إشرحالتعامل مع الصوركع 4ة 1 والتأثيرات المختاغة عليه 

- [الدرس التاسع ]شرح التعامل مع الأزراروالمؤشرات والتأثيرات المختاغة عليه 

- [الدرس العاشر| تعريف بمكتبة 410٣‏ [ قبل البدءفي التعامل معها 

- [الدرس الحادي عشر] شرح التعامل بمكتبة ۲٥٠ا‏ ز وعمل التأثيرات الرانعة لموقعك 

- [الدرس الثاني عشر] تنبيهات + التخطيط الشامل + نصائح قبل تطبيق الدرس 

- [الدرس الثاني عشر۲] تطبيق كامل لتصميم موقع احترافي الجزء الأول التصميم 

- [الدرس الثاني عشر] تطبيق كامل لتصميم موقع احترافي الجزء الثاني الا ٣٤٣"‏ 

- [الدرس الثاني عشر> ] تطبيق كامل لتصميم موقع احترافى الجزءالثالث والأخير التقطيع ٥55+‏ 
- [الدرس الثا لث عشروالختامي] أكواد وتأثيرات جاهزة اعتمد عليها فى تصميم وبرمجة مواقعك 


DDL 


ملاحظه هامه : 
یوجد مع الکتاب مرفقات وتطبيقات عماية مهمه جدا یمکنك 
تحمياها من موقعى المتواضع مباشرة 


advphp.c0m liھ ضط‎ 


DDL 


متطلبات الدورة من برامج قبل أن تبداً التطبيق 


قبل أن تبدأأآخي الفاض يجب عليك تثبيت البرامج الآتية -٠‏ 
.١‏ برنامج السيرفرالمحلي ( ١ه‏ اهءه)) لاتحمیل 
۲. برنا مج تحریر الصفحات ( 51۸۵۲2008 م۸م) للتحمیل 
۴. برنامج معالجة الصورالمشهور( 2ء» photoshop‏ ) لاتجميل 


تنبیه -٢‏ 
إذا كان عند اك أحد البرامح مثبت فلاا نع فار الإصدارإذا قريب 
مثال عندك برنا مج مه ادها هم أي إصداريمشي أهم شي ء المخرجات إن شاء الله وصات 
المعلومة 


مقدمة وفهرس دورة تصميم المواقع المتطور بأسلوب 2.0 اس JG 0O‏ 


الحمد لله رب العالمين 
والصلاةوالسلام على سيد نا محمد النبي الكريم و عاي آله وصجبه أجمعين 
إهمداء.. 
إهداء لكل شخص يسعي لاتعام والاستفادة .. 
إهداء لكل من علمني حرفا وساعدني أن أصل إلى ما أنا عليه .. 
إهداء لكل مستخدم مسام يسعي ليصبح مطور. . 
إهداء خاص .. 

لطوّرموقعاً وإدارةوأعضاءوزائرين 

في هذه الدورة التي تعد من أقوى الدورات التي سوف يتم إدراجها ضمن دورات مطور 
التعليمية › فهذه الدورة هي مغتا حك لتد خل مغهوم التصميم لامواقع بأساوب المجحترفين 

مستخد ه٠‏ الأساس البرمجي في التصميم والابتعاد عن الأدوات التي باتت تقليد يةفي 

استخدامها مثل الضروذت بيج .....الخ 


تتمثل الدورة في كيفية التصميم باستخدام مبدأ 2.0 ۷۴ الذي سوف أقوم 
بشرح مفهومه مع بد اية الدورة بأذن الله . 


تعريف مفهوم الأسلوب المتطور في تصميم المواقع 2.0 اء 


Wiki Ajax Podcasts 
RSS s Réseaux RSS Wiki 


éseaux ` Blog e Blog 


sWeb2.0 


UX e Ajax Blog‏ 2د 
Aiax ee, RéseaUx‏ 
Réseaux Wiki‏ ` 


EES Wiki 


نبد معكم أعضاءنا الكرام بأول دروس الدورةوهو تعريف لصطاح 2.0 ا٥۷‏ 


الذي قد لا يعام الكثير مفهومه الكامل 


أولاً: في عام ۲٠٠٤‏ حد 


ثت طفرة في الويب وأصبجت المواقع تتطورفي مجتواها 


وطريقة تواصاها مع الستخدم للويب فبعد هذا التاريخ حدثت تغييرات كثيرة 


ومنها ظهورأسلوب هيكاة المواقع وهو ما نسميه ۷۴52.0 


۷٥D 0‏ :هي عبارة عن مجموعة متكا ملة من الأدوات والخيارات والوظا نف التي 
توجد نحت بينة واحدة »هذه المجموعة يتم عماها عن طريق مجموعة من لغات البرمجة 


المختلفة » لتعمل بتناغم وتكامل مع بعضها البعض 


أولاً؛ ما هي هذه الأدوات والخيارات والوظ نف ؟ 
لنضرب مثال عملي : موقع مطور! 
موقع مطور عبارة عن منتدی نحت بین برمجیۂ متکا لے ٤1۸‏ ع))ںط۷ 
ال 1۸ عا u)‏ ط۷ لو نظرت لھا راح تجد بھا الاتی : 


-١‏ امع وهومجرك البجث الذى تستخد مه لتبحث عن مواضيعاك او مواضيع اعتاء 
اخریاو تبحث عن موضوعا ما 


lin) 5-۲‏ فأنت يوجد في الهيد ر لنكات اعلانية - والناف بارلنكات ارشاد ية للوحة 
التجكم والبجث والمشاركات الاخيرة ess‏ 
thor N3 -۳‏ uه,‏ فأنت تنجد مواضيع تمت كتا بتها من قبل الاعضاء › هذه المواضع تجد 
لھا ردود ونجد له نجد دات نحدٹ یومیا 
5-٤‏ ه]: الكامات الارشاد ية فهى ما تسهل لك عناءالوصول البجث ›فهى تبين لك الاكثر 
کاما تا بجا من بین الاعتاء e‏ 


۸55-۵ : وهى مفتاح نشر مواضبع المنتدى خارج مكانه على مجركات البجث والمواقع 
الاخرى. 


ثانيا ماهي اللغات البرمجية التي يتم استخدامها؟ 


1+51 فموقع مطورراح تجد انه مقسم إلى هیدروم‌نتدی( جداول) وفوتر › 
وأيضا راح تجد خانات لكتابة موضوع ولاردود ...الخ 
هذه کله یتم تنسیقه ډوو - ۸۲٣)‏ 
2- ×2[ : لعلك تلاحظ عند ما تکتب رد على موضوع يتم اضافته دون اعادة تحمیل 
الصفجة مرةاخى انها لغة ×2 [ه الرائعة 
3- م : لعلك تلاحظ السهولة البالغة في كنابة موضوع »وتخزين بيانا تك ومواضيعك 
واستد عا ئها وقتما تشاء )انها اللخة البنا ية للمنتدی‌والتی نجاکی قواعد البیانات )4١۷إ"‏ 
من مما سبق نکون قد عرفا مهوم 2.0 ۷٥۲‏ بشکل دقیق 
واليكم هذه الصورة لنتذ كر المعنى وما بطير من راسك 


اع مه فی 


اللاي شه والدلالبة-التغذية الرجعبة 
links Seareh‏ 


Tista-design 


مقدمة في sء+اص‏ ط× الجزء الأول J Q "e‏ 


بعد آن تعرفنا علی مفهوم 2.0 ۷۴۲ بشکل صحجیح د عونا نبدا بأول دروس الدورة وهی 
إعطاء نبذة عن ٤>>‏ + )"۳ )۸× یما يخدم دورتنا . 
والنبذةراح أركز فيها على ٠٠‏ يهمنا لان الكلام قد يطول كثيرا في التحدث عن 
5+ )"× ولكن دعونا نعطيكم الخلاصة من خلال ما توصات له وراح اشرح الموضوع 
بشكل ممتع ان شاء الله ولكن قبل ان تبدأ عليك ان تعرف أساسيات هيكيلة الصفجات بشكل 
اساسی لذا نصح بالتوجه لدورة |0١‏ علی مطورفهی راح تفید ك کثیر 


تنبيه قبل البدء : لايد وحتما وإلزاما أن تعود نفك على كتا بة و حفظ الاكواد بنضيك 
وليس نسخ ولصق »لان الإبداع لن بأتي إلا من حفظ الكود وطريقة عمله 


ننطاق بمثا ل عملي حتی نفهم بشکل آوسع : 


أولا: افتح الرابط الاتى اضغط هنا 


قم بعمل كاياك يمين وأنت واقف على الصفحة »واختيارعرض مصدر هذه الصفحة ٥W‏ آ۷ 
source code‏ 
راح نشوف السورس البرمجي لهذه الصفحة كما با لصورة : 


4 1POCTTFE BEml PUBLIC FF RICAF PTED SETHE 1.0 Transitional? 7 EN" "pttpi WUT. TI. OFF TRA REME IF PTH #BtEMII-transit ional. dtl "* 
<html xmlIns="http: f UUW. W3. OFF 1999 xhtml" 
<head> 
>ا1٤1ع<ةريدتسملا درس #طيط وتصميع الزوايا‎ t1te» 
meta http-equiv="content-type" content="textf html;charset=windows-132 56" J> 
meta name="keyuords" content="css tutorial"><fmetaz> 
meta name="descriptiocn" content=""z4#met az 
41ink rel="stylesheet" href="style.css" media="screen" jf» 
4# head> 
<hody> 


<Hdir 1d="container"z 
<dir id="header "> 
<hl1=<a href="http:##vistacompany. org" tit1le="3ڌ‎ رıدتسم درس عمل تحخطيط وزوايا‎ "<yista-desi n< a> <> 
<F Miu 
dir id="content"z 
<h2>ggak | </h2> 
ماذا عكن أن أفعل بتقنية<8>‎ 5٩5 
238 مي لثة تصميم تحدد شكل وثنيقة‎ HHL: 
«فهي تهتمٍ بالخطوطة الألوانء الهامش والعرض والارتقاع‎ 
<#bhr> 


صورة خلفية الوق : وتيفيك توزيع اkلساحات‏ وأشياء آخری تثر 
1 7ء اتقظر فقط وسزرى 


4# br» 

حن أن تستخدم بشكل خاطع لإضافة تصميم ا5713 

للفو 

بھی مور 3 توفر المزيد من الخيارات وهي أتثر دقة وعمليةه ٥55‏ اقع؛ لکن 
٠ muon ren‏ وهي مدعومة من قبل المتصفجحات الرفيسية اليوم 
tf hr» vista-design‏ 


4# diz 


دعوذا نحلل هذه الصمحه : 
کود: 


<!'DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional / /EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtm1l1- 


transitional .dtd"> 
<html xmlns="http: //www.w3.org/1999/xhtml"> 


هذه الجملة مهمة جدا ولابد من وضعها في بداية اى صفجة ›ووظيعتها 
انها تقوم بجعل نسق الصفحة موحد على جميع المتصفحات طبقا ۷33 المؤسسة 
html‏ 
فمثلاقد نجد موقع في الهیدرفوقه فراغ عى الاکسباوروعاى الفا يرفوكس يعمل بشكل 
سليم › وهذا يسبب ان هذه الجملة قد لاند عم الانترنت اكسباورر“ 


لو تلاحظ انه بین وسمی ٣٥۴۵٩‏ تم وضع الاتی : 
کود: 


> دع / >درس تغفطيط وتصميم الزوايا المستد يرة<ه 1ع ذا‎ 1٥< 


وهو خاص بعنوان الصفجة اللي راح يظهرلك في المنصطح : 


aa8‏ إنشاء موضوع جنید - موزیلا قایرقوکس - صںااه M8۴‏ ر مطور 

هلف تحير عرض التاريخ علامات المواقح ادوات مlعدة Relatédgnks‏ اید مور a‏ 
ت — - - ے 

HEN, wthread,php?do=newthr eadêf=38 1 | f 0) @ r ض‎ 


vista-design 


کود: 
<meta http-equiv"content- type"‏ 
content="text/html;charset=windows-1256" />‏ 


هذه الجملة مهمة جدا › ووظيغتها تكمن في تعريف الترميزالخاص با لصفجة لاحظ أن 
۷1٣00۷5-6‏ هو الترميزالخاص با لصفجة وا لمناسب لاغة العربية ويوجد أنواع 
ترمیزأخری ك 8- ۴لا و 150-8859-1 تخیل مٹلاإننا قمنا بتغبیر ترمیز هذه 
الصفجة ل 0-8859-1آشوفوا اللخبطة اللي راح تحصل : 


ترمیز ال 50-8859-1آ 
غيرمناسب للغة العربية 


3 


2َ" می سلو‎ 
andre rern 
vista-design 


<link rel="stylesheet" href="style.css" 


media="screen" /> 


جملة مهمة وهى تشير لكان ماف كك المسمى كك ٥.‏ )/)؟ اللى لاحقا راح نتعرف كيف 
عن طريقه راح نغير تصميم الصفحة صورة لاف ٤5S‏ 


ملف تحرير عرض الثأريجخ العلامات أدواك مساعدة 


e | 7 3 hitp:tadvphp.com’webdrteststyle, cas | 7 x @ 6 4‏ 
© اثر زيارة هل البداية 5 آخر اإخبار [ | اتساد مجائي إ | داع1 ددمت إ | ولم | تخصيص الارتباطات 


- | + | E hitp:#Fadrp_tstyle.css | 


body 
background: #ASe ec url{atepa_U1.gif) repeat-x; 
font:BU$ Arial, Helvetica, Sans-Serif; 
color :#555; 
line-height : 150$; 
margin:O; 
padding:D; 
teExt-align:ceEnter ; 


#containeri 
margin:l auto; 
width: BSOpK?; 
text-align: left; 
f#header 
height :283 px; 
padding-left :5px ¢; 


background:url [steps _O5.gif) no-repeat O O: 


1 
#content{ 
text-align:right ; 
background: url {steps _OB.gif) repeat-y 
padding: . Sem SUpxX 7; 
۴ 
#footert 
padding: S5Ûpx ÖDpx; 
background:url istepa_10.gifj no-repeat O Û; 
colori#ffEEfF; 
۴ 


هذا هوال مات المسنول عن إستا يل الصفجة من خلاله يمكنك تغير خطوط + اللون + نوع 
الخط والكثير ندع الإبداع عايك 


وبھذ ا انتھی ٥ا‏ بین وسم ۸٥۴۵٩۵‏ »ولاحظ أن هذه الاکواد لابد وان توضع بين هذا الوسم 
وليس في اى مكان خر نأتي الآن لوسم اد000۷ وهو خاص بجسم الصفجة ومجتواها 


<div id="container'"> 
<div id="header"> 


<h1><a href="http://vistacompany.org" ti غ1e="‎ Jaa درس‎ 
تخطیط وزوایا مستد یرۃ‎ '<v is ta-desiوg‎ n> /a>>/ ۸1< 


</div> 
<div id="content"> 
<h2>ی٬وتا>‎ / ¬2 < 
9ء مذايمكن أنأفعل بنقنية<م>‎ 


٥-88 هي لغة تصميم تحددشكل وثيقة‎ HM 


هي تهتم با لخطوط »الألوان ءالهامش ءوالعرض والارتضاع › 


</br> 

صورة خلفية ا لموقع › وكيفية توزيع المسا حات وأشياء أخرى كثير 

! )انتظر فقط وستری 

</br> 

يمکن أن تستخدم بشكل خا طىْ لإضافة تصميم .۸111 

للمو 
توفرالمزيد من الخيارات وهي أكثردقة وعملية» 5S‏ اقع ٬لكن‏ 
. وهي مد عومة من قبل المتصفحات الرئيسية اليوم 
</br>‏ 
</div>‏ 
<div id="footer">‏ 
coded by <a href="http://vistacompany.org. com"‏ 


title="css xhtml valid">vistacompany.org</a> 
</div></div> 


لاحظ إن هذا الجملة تم وضعها بين وسم اسمه 1۷ 
وسم <01۷ / > <1۷ > مھم جداوراح یستخدم بشکل مکرر 


«body 3 بغي مور‎ 
۰ mluer dren 
{Ai idA="container "> 
{Aiy id="header "> vista-design 
<hiz=>sta href="http:ffyistacompanyT.oOEg" tiltle="î jun. 
A Air 


Aiy id="content "> 
4h2 ggîkI4f hê» 
ماذا يكن أن أفعل بتقنية<ط»‎ ۶ 


ا في هتح بالطوط: الآلوان: الهامش: والعرض والارتفام 
fBE*‏ 

خلفية الموقعء وتيفية توزيع امساحات وأشياء أخرى كتير 
!7 انتظر فقط وسززيى 
FBE>‏ 
عن أن تستخدم بشكل خاطي لإضافة تصميم H181‏ 

للصي 

فر المزيد هن الخيارات وهي أتثر دقة وعملية 085 اقع: لكل 
.وهي مدعوهة من قبل المتصفجحات الرئيسية اليوم 
<#bE>‏ 

<F Ai 


Hi TES TTODTEE "SS 
coded by <a href="http:ffvistacompanYy.OEJ.COM" Cit le 
2# Ai 

<F Ai 


۱۷ web 0.2 دور‎ 


وفاند ته انه يعتبر إشارة للمنطقة اللي راح نعدل عليها من خلال ماف كك٤‏ 
ما فهمت 1 أقولك أنا 
لاحظ في بداية وسم d۷‏ 
<div id="container">‏ 
جملة هي عبارة عن محدد إن هذه المنطقة راح تخضع للتعد يل ›شوف ماف الذككح وراح 
تفهم قصدي: 


سس )¡ 


margin: auto; 


شت د شی width: SSOpx;‏ 

Lext-align: left? = nı 

id="container‏ ا 
#header {‏ 


height :Z283 px? 
padding-left: 5px 7; 


background:urllstepsa_ US5.gif] no-repeat O U; 


} 
#content { 
EExXE-align:Fight; 
background:url{steps UB.gif] repeat-y 
padding: . 5em SUpxX ?; 
} 
#footer { 
padding: SUpx bÖlUpx?; ن‎ 
background:urllstepa 10.3i no-reyi fee 


color i#IEEEEE: 1 1u TOR 


} 
vista-design 


فهمنا الجبن آن ال 1 ا بیقولنا انه في ملف ٨55‏ راح نشیر له باستخدام علامة وهی تعنی 
اللا لكى نقوم بتغبير هذه المنطقة من الصفجة من حجم الخطوط والصوروالزوابا 


نشو ف آخرالصفحة مثال آخر لوسم ال ۷ل 


<div id="footer"> 
coded by <a href="http://vistacompany.org. com" 
title="css xhtml valid">vistacompany.org</a> 
</div> 


لاحظ أن الل معرفه اختاف واسمه ۴006۲ 
اننا في ماف ٩55‏ عنده!ا نشیر له کالاتی : 
کود ٤55‏ : 


#footer { 
padding: 50px 60px; 
background:url (steps_10.gif) no-repeat 0 0; 
color:#fffffEf; 
} 


راح يتم التعد يل والتغيير على منطقة الفوتر فقط دون التأثير على جزءأخر من الصفحة 
بهذا يكون أخذنا مثال عملي لاجزءالأول من التعرف على كئ٤+‏ )")۸ 
وأنبه واكرر»لابد من إلقاء نظرة على دورة 1)١)‏ حتى تضح لك الصورة أكثر 


مقدمة فی ess+اصhtا×‏ الزء الثانى 


راح نفتح نفس لمثال السابق استعرض السورس كود با لضغط كليك يمين ورؤية مصدر 
الصفحة W S01 ۲٣€‏ ۷/10 مرةأخرى : 


والجين راح يكون التجدث عن السورس كود وماف 55 على هينة سؤال وجواب 


-١‏ ماهو ماف 55) .€ )/)؟ وما هی آهمیته؟ 
- هو عبارة عن ملف وعن طريقة راح نغير من شكل الصفجة في اى جزء نحن ذريده ›سواء 
- وضع خافية لصف back$rOUNd‏ 
-تخییر الخطوطا×ع ) من الوان 0۲ K0)‏ وا حچام 0٥۸-517‏ ونوعھا ۴0٥۸ ٤-‏ 
family tahoma...timesnewroman....etCc‏ 
-وضع جدول 00۲08۲ والتحكم في خصانصه من حجم الحد وسمکه ولونه .الخ 


۲-كيف استد عى ماف 055 . )5۷ في الصفجة اللى آذا مسويها حتى يقوم بعمل 
التأثيراتاللى تم ادراجها به؟ 


- عن طریق هذه الجملة ووضعھا بین وسمی ٣٥۵٩d‏ کہا ذکرنا سابقا : 
کود: 


<link rel="stylesheet" href="style.css" 
media="screen" /> 


کل ما یھمنا هو ٣۲٤۴‏ وفیها راح تحدد مکان ماف کک لاحظ انه ماف کک ٥.‏ )لاء لوکان 
داخل مجلد الصورك عة" | على سبيل المثال راح يكون هذا مساره 


مثالأنظرإلى الكود تلاحظ أن في تغير وهوأضافا أسم المجلد ( ٣2465‏ ]): 
<link rel="stylesheet" href="images/style.css"‏ 
media="screen" />‏ 


٣-كيف‏ ابدأفي تعلم 3٥55‏ حتى أقدرأآفهم كيفية التغيير على الصفحة با حتراف؟ 


- هذه النقطة تناج لتطبيق كثير ومطا هيم أساسية لابد إن ترفعها بجانب ما راح أسرده الآن 

»وراحاحدد لك مصادر تقد ر تزود بها خبر تك وأنا راح أ عطيك مفتاح الانطلان من هذه 
الدروة حتى تكون على وعى بمفهوم 55 بشكل واضح ›اسنكمال لاسؤال الثالث : نجاوب 

على الأسئاة الآتية -١‏ 

١-في C55‏ ما هي الصيغة العامة لكنابة الكود: 
- الصيغة هي : 

م: وهى وسم الأ" اللي راح نعدل عليه › يعنى على سبيل المثال في المثال اللي قمنا 

بسرده راح جد عبارة 


2 : تعنى ال ۸۴241٣352‏ وعندما نريد التغير على كامة المحتوى راح نستد عيها في 
ملف كك بكتابة 2 وتصبح الجملة : 


h2{color:red; text-align: center} 


ملاحظه : اذهب لدورة ٣)٣)‏ لتفهم کلامي 


color:red 


٣ات‏ وهى الخاصية اللي راح نستخد مها لتغير اللون فمثلا لو أردت تغير اللون فلابد من 
استخدام عبارة ٥0)0۲‏ 
ولوکانت للخطوط راح تکون ٥٩۸٤‏ 
ولوكانت لاخافية راح تكو |۲007 D5 a›)£‏ 
وهكذا »وانا راح اسرد كل الاشياء فيما بعد 
نکمل 
۵ هى قيمة اللون » يعنى نخبر المنصفح أننا نريد أن يكون لون كامة المحتوى هوالأحمر 
red‏ 
لاحظ العلامة ؛ الفا صاة بین ۲€ text-align: CeNt€r ùy C0)0۲:‏ 
هذه العلامة تسخدم للفصل بين أمرين 
فمثلا بعد هذه العلامة راح تد text-ali9^: Cen t€‏ 
وهی آمريخبرنا أننا نريد توسيط الكلمة ۴١۲‏ وجعاها في وسط مکانها 
أخيرا: 
نعرفالطريقة اللي راح تكتب بها كود 55ع 
١-حدد‏ المكان اللى راح تغير عليه في صفحتك ولیکن ۸2 
۲-افتح وسم ر ) 
٣-بين‏ الوسم ضع الأوامرالتي تريد تنفيذها ٤0)0١: ۲٥١‏ 
۵-لعمل أكثر من تأثير على نفس الوسم 2 افص امرك با لفاصاة المنقوطة ؛ 
٦-لعمل‏ تأثیر علی مکان اخر› لابد من اغلان الوسم ثم بدالتغییر على آمر جد يد 


مثال: 
p{color:red; text-align: center}‏ 
h2{color:green; text-align:left}‏ 


لوفتجنا ماف كك .€ )لك »راح نجد عبارة مثل هذة: 
کود: 


#container { 
margin:O0 auto; 
width: 850px; 
text-align: left; 
} 


اذا تعنی €۲ #CONtaİ^‏ $ 
لورجعنا لصفحة ٣)‏ الخاصة بنا 
راح نجد هذه العبارة : 
<div id="container">‏ 


<div id="header'"> 


درس <h1><a href="http://vistacompany.org" ti خ16e=" Ja‏ 
<1 ¬ />>gn>/aوdes1i-vsta<'‏ تخطیط وزوایا مستد یرۃ 


</div> 
<div id="content"> 
: أول كلمة‎ 
id="container" 
هذه هي المعرف اللي راح نغير عليه وقد رمزنا في ماف 55ء لال¡ بالعلامة ثم الجقناه‎ 
باسم هذا ادل‎ 
: ولاحظ آنھا تم ضمھا داخل وسم 11۷ کہا شر حنا سابقا وعرفنا آهمیته‎ 
وفي نفس الصفجة راح تجد أ آ مختافة › كل ١آ راح يستخدم لتغيير جزء معين من صفحتنا‎ 
أمثلة:‎ 


<div id="header'"> 


للتغبير على الهيدر e‏ 


<div id="content"> 


- ٠ا‏ هي المتغيرات والقيم الخاصة بوك 
-إجابة السؤال هذا محتا جه دورة كا ملة لجالها : 
لذا أنصحك بعمل الاتى الذهاب ل ئأاه ۷35٤0‏ من هذا الرابط 
ثم راح تجد انه مستوی مرجع کامل لکل أوامر ٤55‏ 
كل يوم تعرفلك على الأقل ۵ أو“ مغاهيم وتدرب على المثال ›وراح نجد أن كل أمر له مثال 


وآنا في دورتنا راح آنوه للأشياء التي سوف نجنا جها بكذرة 
انظر للصورة الآتية وراح تعرف الهم واللي راح يخد م دورتنا باذن الله 
وتدرب عليه جیدا. 


CSS MTWER SHEET 


الهن الثلفية 3 2 1 
د رابط صورة الخلغبة_ }; 1-background ¥ body{background: #ooffoo url(smiley.gif) repeat-x‏ 
٠‏ تكرار الصورة بالعرض 3 الخلفية 
EK. 1 2‏ 
1 سيك الد ¬-border Jy p{border:gpx solid red;}‏ 
الحواف(الحد) 


3-oat  img{float:right;} 


الطفو(اجاد) 


ex: 2 
4-font — p{font:ı5px arial,sans-serif;} 


الخط 


ş-height e ptheight:ioopx;} 
الارتفاع‎ 
éû-margin ت‎ p{margin:1opx 20pK 5PX 30PXK;} 
لاحظ وضع كلم داد لتفهم المحاذاة الحواف الخارجية‎ 
tap right bottom left 
7-padding ت‎ p{padding: şpx 4px 2opx şopx;} 30px ا‎ 4PX 
الجاداة‎ 


ex: 
B-position > p{postion:absolute;} 
الوضع‎ 


g-text-align یت‎ p{text-align:center;} 
وضع الشص‎ 


: ex: ٤ 
1ı0-width —- p{width:zoopx;} 


11-visibility my p{visibility:hidden;} 
درجة الوضوح‎ 


ما حظات خامة؛ 


-١‏ حتی تغرف فهرم صنع+د.-۲ءل ۲د ا-عہنك3دم القى نظرة على هذه الصورة لتفيم القصد 
شد المسافة فى add‏ م 
border -‏ 
margin‏ 


2- تذكر قاعدة اا٤‏ مهم ك صهطاامط5 وتعنی انه يننا تجميع جع قيم احد الخواص فى جملةواحدة. 
مثال: هذه الجملة ' p{border-sty lessolid;border-coloryred;}‏ 
يمكننا تجميعها معا فى جملة واحدة بالتتايع راح نكتب الحجم بم ثم قيمة اراد ثم قيمة اللون لتصبح بالشكل الأتى : p{border;5pxsoliıdred;}‏ 


ويالمثل طيق القاعدة على بقية اتخواص مثل عصنكل دم فجن بنكتب الحجم للمحاذاة العلوية مد ثم اليمنى عن ثم السفلى داه ا ثم اليسريا؟ء! 
ایان تنابعھا کانھا دائرة تبدأ من قمنها رها 


ا 
mle Tom‏ 
اشم اھ را 


هذه الصورة قمت بعماها في ٦‏ ساعات متواصلة حتى تكون مرجع سريع لك بأذن الله 
هذه الصورة راح نتدرب عليها من الدرس القادم بأذن الله وراح يكون فيه درس مكثف 
مخصص على التدريب على ال55 وراح يكون فيد يو حتى تشوفوا طريقة الكتابةفي كو 


الطلوب: عمل صفحة بسيطة تقوم فيها باستخد ام ا(( ٣K٠١)‏ وككء) 


4 


JG Fe) xhtml+css pIlaختwl أُساسيات مهمة في‎ 


في هذا الدرس راح نتعرف على الأساسيات المهمة في استخد امال( ٣١)‏ X×+55ء)‏ 


الدرس راح يكون في صورة تذكر + 
-١‏ تذکر عندها ترید التغییر علی وسم |۸۳ ڊ C55‏ فيوجد طرق مختافة 
في كتا به الكود: 
نأخذ أمثلة : 


-١‏ وسم 01۷ بداخلة ١‏ لوسم مجحدد: 


<div id="container"></div> 


عندها تريد التغيير من 55 راح تكتب الكود كالأتي: 


#container { 


div#container {‏ 
۲- لوکان بداخل وسم 11۷ آوسمة آخری »كيف راح تکتب الکود؟ 
مثال: 


<div id="container'"> 


<h1>Online File Storage</h1> 
</div> 


راح یتم التغییر علی ۸1 کالاتی : 


#container h1 { 


او 
div#container h1 {‏ 


۳- لو نستخدم 55ھ )ع بدلا من ا1 › کیف راح تکتب کودك: 
مثال: 


<h1 class="center">Center-aligned heading</h1> 


راح تغیر على هذا الوسم ۸2 كك بالاتي: 


. center { 


-٤‏ تذكرأن تنهى كل جملة في 55) بالا صاة المنقوطة ؛ 


div#container 


{ 
width: 600px; 
margin: Opx auto; 
border: 1px solid #e6eef6; 
background-color: #ffffff; 


} 
۵- تذكرأن ۸1× هي نفس ] ٣")‏ ولكن افر أن ×٠1‏ أصبجت هي المعتمدة 
لان 3€ ۷ قامت بتطویرال ۸۲٣]‏ ل ]۳× ویوجد فرون مختافة 
مثلا: ما الفرق يبن هذه الجملة : 

<b><i>This text is bold and italic</b></i> 
: وهذهالجمله‎ 
كلاالجملتين راح تعطى نفس النا تح على المتصطح لكن لودققت ولاحظت انه يوجد‎ 
اختلاففي ترتيب بداية ونهاية وسم <> و<آ> فالجماة الأولى لا تعتبر دقبقة‎ 
الجملة الثا نية أكثر دقة ومنظمة وتتبع النظام‎ ٠١ ۸" وتتبع لانظام القديم‎ 
e وھكذا‎ ×۸١ الجد بد‎ 
تذكرأن تعام الك لن يأتي إلا من التدريب المكثف وتنزيل صفجات‎ - 
ويب والتحد يل على ملف 55 مرةواثنين وعشرة‎ 
هذه هي أهم الملاحظات التي أحببت أن انوه عنها في هذا الدرس وأتمنى من بعد هذا‎ 
الدرس أن تكون تكوذت لد يك خافية ولو بسيطة عن 55 حتى ننطاق بدءا من الدرس‎ 
القادم با لتطبيق العملي »وراح يكون فيه درس إضافي على دروس الدورة › عبارة عن‎ 
. لصمجات ویب مختاعة‎ C55 دروس فيد یو للتعد بل على ماعات‎ 


دروس فيديو مكثفة متعددة المستوبات تلتعامل مع ك 


نستكمل معكم أعضاءنا الكرام دروس دورتنا وبعد أن تعرفنا على أساسيات التعامل مع 
5ئ N")‏ × دعونا »نشوف دروس فید یو قمت بعماها لتری كيفية التحد یل على 
صفجات الويب وانا قسمت الدروس لمستويات : 
١-المستوى‏ الأول : موجود في المرفقات ( شرح فيد يو) 
۲- المستوى الثاني : موجود في المرفقات ( شرح فيد يو) 
الملطات التي تم شرحها في الفبد يو مرفقة بنضس ماغات الفيد يوأتمنى تستمتعوا بالشرح 
عمل صورة توضح اى تعد يل على الصفجة التي تم إرفقها في كل درس سواءالوان 


وضع السورس كود لاف ٤5S5‏ 


كيفية عمل خطيط لصفحةا ںہ ردا مھیدا لتصمیمھا بے د 


نبد معكم انطلاقا من هذا الدرس استغلال ما تعامناه في الدروس السا بقة وبدء من هذه 
الدروس › فلابد الاستيعاب جيدا والتطبيق المكثف حتى تتعام يا تقان الووع 
في هذا الد رس راح نعرف كيف نخطط لصفحة قبل تصمیمها ب55٣‏ حتی تكون 
منظمة في تقسميها ونكون سهاه في التعد يل عایها بکل سهولة في ای جزء تریده 
من الصفحجة إذا أردت ذلك لاحقا : 


أولا : راح نضع مخطط لصفحتنا بحيث تشمل الأتي : 


١-الهيدر:‏ ويشمل لوجوالموقع + تسجيل الد خول 

۲-الناف بار: ويشمل لنكات الموقع الرئيسية 

۴ قانمة يمنى: وتشمل لنكات الأقسام الداخلية للموقع 

٤‏ قانمه يسرى : وتشمل مجتوى الموقع من مقالات. ...لخ 

۵-الفوتر: ويشمل حقون الموقع e‏ 

1 المحتوىالرئيسى :21١‏ وراح يشمل بداخلة القا ثمة اليمنى والقائمة اليسرى 
۷-المحتویالكلى 60۸21١6۲‏ : وراح الهيدر+الناف بار+المجتوى الرئيسى +الفوتر 


الآن: دعنا نرسم مخطط لهذا الكلام e‏ 
انظر لهذ ه الصورة وراح تفهم المحنى : 


تسيل الدخرد 111 #s1g1‏ | 


#header‏ الهیدر 


عba¥na#‏ التاق بار 


Fleftcolumn #rightcolumn 
العمود الأعمن الهمود الأيسر‎ 
(للقوائم) (للمقالات)‎ 


وجوللا#ا0g0‎ 


#container 


المحتوى الكل 


#fDoter‏ القوقر 


مهد مطور ل“ 
mluer Gren‏ 


vista-design 


الحبن من هذا الصورة نريد أن نكتب كود ٣)١)‏ لهذه الصفجة 
وراح یکون کالأتي: 


container للمجتوی الکڪ‎ d1۷ -١ 
بداخل ال 1۷ل السابق راح يكون فيه 11۷ للأتي:‎ -۲ 


: للهیدر- وبداخل هذا ال 0۷ راح یوجد‎ 01۷ -١ 
رابط اللوچو‎ - 


- خانة تسجيل الد خول 


۲- ۷[ للناف بار- وبداخلة راح يوجد 
-لنك الرئيسة 

-لنك المنتدى 

-لنك اتصل بنا 


۴- ۷ل للمجتوى الرئيسى ۳۵1١‏ -وبداخلة يوجد 11۷ الأتى : 


-١‏ 1۷ل العمود الأيسر( للمقالات) بداخلة العنوان والتاريخ والمقالات 
۲- آل العمود الأيمن ( لنكات الأقسام ) بداخلة لنكات قسم ... وقسم.... وقسم ا 


52٤٥ والفوتر وراح نسميه‎ "21١ لفصل مسافة بين ال‎ 1۷ -٤ 
الفوتر‎ 1-5 


: وبهذا راح يكون كود الصفجة كالأتى‎ 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional / /EN" 


"http: //www.w3.org/TR/html4/loose.dtd"> 
<html> 


<head> 
<k Kkkkkkxkk tx ¥'"CcOntent- type" 
content="text/html; charset=windows-1256"> 
<**** name="author" content=""> 
<link rel="stylesheet" type="text/css" 
media="screen" href="style.css" /> 
> ذا‎ 1٠< 1ع / > درس تفطيط صفحة وتخطيطها تمهيدا لتصميمها‎ 1٥< 
</head> 


<body> 


<div id="container"> 
<div id="header'"> 
<div id="1ogo"><img SFc="gجوgلll </'"'رابط‎ </div> 
<div id="form"> 
<form> 
:الیوزر‎ >nPput type="text" name="username"> 
<br> 
:الیاسورد‎ >np ut type="password" name=" password" > 


</form> 
</div> 


</div> 
<div id="navbar'"> 
<a href="index. html ? home" >iيسيأرلا‎ </a> 
<a href="index. html ? forum" >ydiill< / a> 
<a href="mailto:vista-designCemai1 . con" >liq >اتص‎ / a> 
</div> 
<div id="main"> 
<div id="leftcloumn"> 
>اضف مقال<11>‎ / ٣1< 
<h2>8 january 2010</h2> 
<م/ >مقالك ھٹا اکتب <م>‎ 


</div> 
<div id="rightcolumn"> 
<h3>puêٺll‎ </h3> 
اكتب الأقسام‎ 
</div> 


<div class="spacer"></div> 
</div> 
<div id="footer">© 2010 vista-design </div> 
</div> 


</body> 
</html> 


شوفوا شكل هذه الصمحة قبل التعد يل علیها ب55 كيف شكاها 


الیو ند: 


:المباسو دي 
اأرتيسية المنتدی انصتگ دنا 


اضق مقال 


january 2010‏ 8 
اكت مفاطلك هسنا 


اكام 


اكتب | لاسام 
ZAU10U Yista-design‏ 


pri ate E @) o.25: E 
الحين شوفسجرال5ك الاي راح نسويه على هذه الصفجة بكل بسا طه‎ 


حتى نجعاها صفجة لها قيمة ومنظمة. 
نأتي الآن إلى ماف كك .اراك 
أولا شوف الصورة الآتية مرةآخرى حتى نفهم كيف سيكون التخطيط بك 


width:auto 
ال@یدر‎ #headar height: SOpx 
dî 


splay: bloek 
0 
| #logo #sign in | 
#navbar 
#container 
width: SO0px 
margin: auto 
#main i 
wielth:auto 1 4 4 
Freres #Hleftcolumn #rightcolumn 
padding: Spx O 3px O0 width:4SOpx width:1 8O0px 
mar gin-left:20px marignrleft:2O0px 
float:left float:right 
width:auteo 0 
display:blaek 
eps xam ran 0 #footer 
اا‎ 
mle idrein 


vista-design 


هذا هوالمطاوب الصجيح واللي مفروض أن يتم على أساسه تقسيم الصفحة 
وبعد إضافة بعد الأوامرراح يصبح كود ۳55 بهذا الشكل : 


css vista-design layout 
هذا خاص بالتنسيق الرئيسى من الصفحة من خطوط ونوع الخطوط وتا ثر رورا لاوس‎ 
*/ 


body{font-family: tahoma, Helvetica, sans-serif; 


font-size:12px; margin:20px; padding:0;} 


input, form, textarea 
h1, h2, h3, h4, h5, h6{margin:0; padding:0;} 
h1{font-size:18px;} 
h2{font-size:14px; color:#999999;} 


h3{font-size:13px; border-bottom: solid 1px #DEDEDE; 
padding: 4px 0; margin-bottom: 10px; } 


a:link, a:visited{color:#0033CC;} 
a:hover {text-decoration :none; } 


PAGE STRUCTURE 
هذا هوالتغيير الهم اللى راح يقسم الصفحة كما هوموضح‎ 


#container{width: 800px; height:auto; border:1px 
solid; margin:0 auto; } 


#header {border : 1px 
solid;width:auto;display:block;height : 60px; } 
#header form{float:right; text-align :right; 
padding: 5px 10px; } 


#navbar{text-align:right; font-size:small ; 
width:auto; border:lpx solid; display:block; 
height: 30px; } 

#navbar a{height:28px; line-height: 28px; padding: 0 
4px; display:inline;} 


#main{border:1px solid;width:auto; display:block; 
padding: 10px 0;} 


#rightcolumn {width: 100px ;border:1px 
solid;height: 300px; margin-right:20px; float:right; 
text-align:right; 
padding-right: 3px; } 

#rightcolumn h3{text-align: center; } 


#leftcolumn {width : 590px ;border:1px 
solid;height: 300px; text-align:right; margin- 
left:10px; padding: 3px Spx 3px 10px; float:left;} 


div.spacer{clear:both; height:10px; 
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display:block; } 


#footer{width:auto; display:block; padding:10px 5px 
9px 3px; font-size:llpx; color: #666666;} 


لوتلاحظ يوجد بعض الأوامرراحأوضجها لك : 
display:block‏ 
وظيغتها أنها راح تقوم بصف اللنكات أو اى كامات على صف واحده على هيئة بلوك › مثل ما 
نشوف لنكات الناف بارالرئيسية المنتدىاتصل بنا... 


height: auto 
١١١١١١ أريد أن انوه لاقيمة 10ا2 فهي مهمة جد‎ 
یجب أن تعام انه من المغروض انه ای ارتا ع راح ډأخذه ای وسم داخل‎ 
ا1٥ وسم تم نحد ید قیمة طوله آن تکون قیمته‎ 


مثلا: لووسم ۳٣۵1۸‏ قمنا بتعیین قیمته إلى : 
height: 300px‏ 
ایوسم داخله ولنفرض وسم ١١‏ )0٤٤۴ع(‏ إذا آردنا تحد ید ارتفا عه فالمغروض أن یکون 
أن ارتفا عه هكذا 


height: auto 
لماذا؟‎ 
×٠١ لأنه على سبيل المثال أذا كتبت مقال وقد تجاوز طوله ١٠٠×م لوأذت عينت الطول‎ 
ولم تجعله 0 لاه سوف يتوقف المقال عند هذا المقاس »أ٠ا لو جعلته 2110 راح يتمدد‎ 
المقال على حسب حجمه طالطا عينت قيمنته 10ا2‎ 


ولاحظ أن في كود صفجتنا أن لم أسوى هيك »وهذا یعتبر خطاً منی ولکن آنا حددت قيم 
ال† اع" الداخلية فقط ليكون للصفجة أبعاد يمكنكم مشاهدتها يمكنكم مشاهدة مثال 
عملي للصفجة اصفط هنا 


بهذا يكون انتهى من هذه المقرة. 


المطلوب : عمل تعد يل على هذه الصفحة بالأتي :- 
١-إضافة‏ لنك في الناف بار. 
۲-إضافة 1۷ل فون الفوتر وقم بتجد بد الحدود الخاص به 0)1 50۲٤۲‏ 


شرح كيفية عمل القوائم المتحركة والمتعددة كuادءه‏ كع 


في هذا الدرس إن شاء الله راح نتعام كيفية عمل القوانم المتحركة واختصار لوقت راح نشرح 

لكم الخلاصة » لأنه في تصميم المواقع وبرمجتها يجب أن تعام انه فيه أشياء كثيرة تستخدم 

لابد أن تفرغوقتك لك وتعطيها اهتما مها الأول وموضوع القوائم المتحركة يعتبر من الأشياء 

اللي ممكن تحصل عليها من اى موقع وبمجرد تعلمك كيفية التعد يل › فهذا يكفي لان يؤدى 
طابك حتى تعطى وقتك لابرمجة الداخلية للموقع r‏ 


أولا: أنا راح أشرح أسهل أسا ليب القوائم المتحركة وهو قوائم كاه 


ثانيا: في الاعات المرفقة يوجد ماف شامل لأمثلة قوائم متجركة كثيرة 


ملاحظه : الملف تم أخذه من موقع 00 . 1/١2 ۸١1٤٨ 0۲1۷٥‏ للاكواد وأدوات المبرمجبن 
حفظ للحقوق 
راح نأخذ منها المثال الثاني 2٥ع‏ )م "۴×2 ونشرح طريقة التعد يل عليه : 
اولا: قم بفتح ماف صفحة 7¬ . 0ع dropdown tabs‏ ببرنامچiا‏ 
phpdesigner‏ 
انظر لکود ٥2‏ )م :٥×4 ١‏ 


القائمة الرئيسية حتى نحدد لها قوائم فرعية 
الايد وان نضح داخل وسم <> جملة الأرتباط 
"13القوانم الفرعية"=1ءا 
ەشال 
Home || c55 | Partners Tagg | TaBESEhttpy/ (wre. siteecam"rel="dropmenu2_b">Partners< a>‏ 


CSS Drive 
JavaScript Kit 
Cading Forums 


JavaScript Reference 


هذه القوائم الفرعية id=dropmenu2_b[b‏ 
vwista-design‏ 


نهك مور ۳ 
7 
A‏ 


Web 0.2 »رة‎ 


راح نجد هذا الكود 


<div id="bluemenu" class="bluetabs'"> 
<ul> 


<1i><a 
href="http: //www.dynamicdrive.com">Home</a></1li> 
<li><a href="http: //www.dynamicdrive.com/style/" 
rel="dropmenul_ b">CSS</a></li> 


<li><a href="http: //www.site. com" 
rel="dropmenu2_ b">Partners</a></li> 
<li><a 
href="http: //tools.dynamicdrive.com">Tools</a></1li> 
</ul> 
</div> 


هذه هي أكواد القوائم الرئيسية ›يمكنك تغبير الرابط الخاص بأي لنك تريده مثها تشاءِء» 
ويمكنك إضافة عدد لانهائي من القوائم ياضا فة وسم الست 
مثال: 


<li><a href="http://tools.dynamicdrive.com">contact 


us</a></1i> 
الحبن عرفا القوائم الرئيسية »نتنقل الحين لاقام الفرعية المدرجة تحت قسم رئيسي‎ 
كيف راح نضيفها لزررئيسي من هذه الأزرار‎ 


أولا: حتى تفعل ذلك لابد أن تشير في كود القوائم الرئيسية السابق بأننا راح ضيف له أزرار 
فرعية داخلية وذلك باستخدام العبارة الآتية: 


راجع كود القوائم الرئيسية وراح تجد هذا الكود : 


<li><a href="http: //www.site. com" 


rel="dropmenu2_ b">Partners</a></li> 
الكود الملون بالأحمرفا د ته أذنا اخبرنا هذا الزرالرئيسي انه فيه أزرارفرعية راح تندرج‎ 
dropmMeNU2__Ö اس4‎ 1٩ تعته واستخد منا لھا‎ 


نأتي الآن للأزرارالفرعية 
وراح یکون کودها کالاتی : 


<div id="dropmenu2_b" class="dropmenudiv_b" 
style="width: 150px;"> 
<a href="http://www.cssdrive.com">CSS Drive</a> 
<a href="http://www.jJavascriptkit.com">JavaScript 
Kit</a> 


<a href="http: //www.codingforums . com">Coding 
Forums</a> 


<a 
href="http: //www.javascriptkit.com/Jsref/">JavaScri 
pt Reference</a> 
</div> 


لاحظ الكود الملون بالأحمر فهو 1 الذي اشرنا له في الزرالرئيسي 2۲۲١٥۲١‏ حتى 
تندرج هذه القانمة الفرعية أسفاه لرؤية مثال عملى لهذه القوائم أضغط هنا 


بهذا انتهينا من درس كبفية عمل القوائم المتحركة والمتعددةأتمنى تكونوا استمتعتم بالدرس 


المطاوب : 
عمل تعد يل على هذه القانمة وإضا فة أزرارإضا فية وفرعية لها أووضع صورة فقط 
للتعديل. 


شرح التعامل مع الصور؛ءعد”: والتأثيرات المختلفة عليها مطور 


راح ننتقل لدرس أقوى وأجمل من دروس الد ورة وهو كيفية التعامل مع الصوريكك 
أولا: خلونا ندرف عن ای شی ءراح نتكلم في هذا الدرس ا 
انظر للصورة : 


درس التعامل مح الصور مح الماضرات الح 


الاظهار والأخفاء 


: @ بای مطور‎ 
mle Tenn 
vista-design 


التعامل مع الصوريعتبر من الأشياء المهمة ونجتاج لتدريب كثير في استخد امها واخضاغها 
لاى شى ء تريده في الصفحة وأنا سوف أعتمد في درسنا على سهولة الشرح وكيف نحقق 
طابك من ای صورة ترید ها . 


أولا: أكيد لوأنا عندي مجموعة من الصورة فأ عتقد أننا راح نجنا جها في هذه الاشياءفي 
الغالب 

-١‏ كيفية وضع صورة في الصفحة والتحكم في أبعادها. 

-كيفية عمل خافيات للصفحة با لصورفي صفحات الويب وتحد يد أبعادها. 
-كيفية عمل مجموعة صورعلى هينة معرض صور. 

٤-كيفية‏ عمل سلايد شو للصورونحريكها واحده تلو الأخر على حسب رغبتك. 


الحبن راح أبدء معكم بشرح الأسهل فا لأصعب e‏ 
-١‏ كيفية وضع صورة في الصفحة والتجكم في أبعادها ! 
آکید نعرف انه في ۸٤٣)‏ اذا اردنا وضع صورة راح نضعها بین وسم 4آ 


وال ٣‏ ڄل Wİ‏ وال † "eih‏ لاتحکم في أبعادھا › خلونا نأخذ مثال: 


: 1N) ٣] صفح‎ 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional //EN" 
"http: //www.w3.org/TR/html4/loose.dtd"> 
<html> 


<head> 


<Kkkxk xkkkkkkkxkxXxXK*K*'"content- type" 
content="text/html; charset=iso-8859-1"> 

<**** name="author" content='""y> 
<link rel="stylesheet" type="text/css" 


media="screen" href="style.css" /> 
<title>Untitled 1</title> 
</head> 
<body> 


<img src="banner.gif" /> 


</body> 
</html> 


الحبن نريد التغيير على هذه الصورة بتأثيرات مختافة : 
-١‏ عمل خفوت على هذه الصورة بمجرد أبعاد المأوس عنها : 
راح يصير الكود هذا وراح نستخد م أمر الخفوت 022٤¥‏ 
وأمر عمل التأثير عند المرور با اوس 0١۸۸١015٥0۷6۲‏ 

<img src="banner.gif" 


style="opacity:0.4;filter:alpha (opacity=40) " 
onmouseover="this.style.opacity=1;this. filters.alph 


a.opacity=100" 
onmouseout="this.style.opacity=0.4;this.filters.alp 
ha.opacity=40" /> 


ولاحظ ان قيمة ا( 0٨1۷‏ كالما قات كاما زادت درجة الخفوت واكبر درجة للخفوت هي 
٠,١‏ واقل درجه هي ۰,۹ إلى أن لا يوجد خفوت بالقيمة ١‏ 


مثال عملي :أضغط هنا 


۲-كيفية عمل الصورة وجعاها خافية أ ٤)0۲ ٣‏ بكامل الصفجة . 
هذه النقطة كثير جدا من المصممين المجترفين لا يعرفها لأنك لو جربت توضع صورة 
كخافية بطريقة تقايد ية راح تجد واحد من المشاكل الآتية : 
-١‏ وجود ذراغ في الجزء العلوي لاصفحة 
۲- عدم اكتما ل الصورة كخافية أو اقتطاع جزء منها 
لذالك لنجل هذه المشكلة مع صورة تريد وضعها كخاعية استخدام الاتى : 
کود h٣‏ , 
<div id="bg">‏ 
<div>‏ 
<table cellspacing="0" cellpadding="0">‏ 


<tr> 
<td> 


<img src="vistaultimate. jpg" alt=""/> 
</td> 
</tr> 
</table> 
</div> 
</div> 


مع ملاحظة تغيير رابط الصورة م ز. 2€" 1) vist au)‏ 
کود °55 : 


1 
margin: 0; 
padding: 0; 
} 


html, body, #bg, #bg table, #bg td { 
height: 100%; 
width: 100%; 
overflow:hidden; 


} 


#bg { 
position: fixed; 


} 


#bg div { 
height: 200%; 
left:-50%; 
position:absolute; 
top: -50%; 
width: 200%; 

} 


#bg td { 
text-align: center; 
vertical-align:middle; 


} 


#bg img { 
margin:O0 auto; 
min-height: 50%; 
min-width: 50%; 

} 


:٥55 كيفية عمل معرض لاصورب‎ ٣ 
معرض الصور يعتبر من الأشياء الجمياة التي يجنا جها الكثير وفي هذا الدرس راح أضع لك‎ 
مثال بسيط لمعرض الصوروفي الدرس الختا مي لهذه الدورة راح أضع لكم متطورة أكذر داخل‎ 
فيه الاجاکس بجانب وو‎ 
۸٣) أولا: صفجة‎ 


<!'DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional/ /EN" 
"http: //www.w3.org/TR/html4/loose.dtd"> 
<html> 


<head> 


<Kkkxk xKkkkkkkxKxXxXKX*"content- type" 
content="text/html; charset=windows-1256"> 
<**** name="author" content=""> 
<link rel="stylesheet" type="text/css" 
media="screen" href="style.css" /> 


۷ web 0.2 دور‎ 


> 1ا / > معرض صورميسط<ەt1 1ا‎ t1 e< 
</head> 
<body> 


<div class="img"> 
target=" blank" href="http://vistacompany.org/"> 
<img src="gal. jpg" alt="vista" width="200" 
height="250" /> 
</a> 
<div c1ass=" ل٠ءsء" ذل / >أكتب اى شىء تحت الصورةهنا<‎ < 
</div> 
<div class="img"> 
target=" blank" href="http://vistacompany.org/"> 
<img src="gal. jpg" alt="vista" width="200" 
height="250" /> 
</a> 
<div c1ass=" ٠s" ذل / >أكتب اى شىء تحت الصورةهنا<‎ < 
</div> 
<div class="img"> 
target=" blank" href="http: //vistacompany.org/"> 
<img src="gal. jpg" alt="vista" width="200" 
height="250" /> 
</a> 
><div c1ass=" ل٠sء" ذل / >أكتب اى شىء تحت الصورةهنا<‎ < 
</div> 
<div class="img"> 
target=" blank" href="http://vistacompany.org/"> 
<img src="gal. jpg" alt="vista" width="200" 
height="250" /> 
</a> 
<div c1ass=" ل٠ءsء" ذل / >أكتب اى شىء تحت الصورةهنا<‎ < 
</div> 


</body> 
</html> 


div. img 

{ 

margin: 2px; 
border:lpx solid #0000ff; 
height:auto; 
width:auto; 
float:right; 
text-align: center; 
} 


div.img img 


display:inline; 
margin: 3px; 
border:1lpx solid #ffffff; 
} 
div.img a:hover img 
{ 
border:lpx solid #0000ff; 
} 
div.desc 
{ 
text-align: center; 
font-weight: normal ; 
width: 120px; 
margin: 2px; 


} 


نشرح الآن كيف تعدل على المعرض مثل ما تحب ؟ 
-١‏ كيف تغير رابط الصورة الخاص بك : 


راح تغير ا 2 ز .)ه5 للصورة اللي تريد ها ولا تنسى أبعادها واناك تكون عارفها حتى 
تغير ال W1‏ وال† اع" الخاص بها وآنوه ان )2 في الكود وظيعتها انه لو فرضا 
الصورة لم تظهر او كان رابطها خط › فراح بظهر مكان الصورة كامة ۷١2‏ 


۲- كيف تضع رابط عاى الصورة؟ 


<a target="_blank" href="http://vistacompany.org/"> 


وتغير الرابط في ۲١۴‏ برابط موقعك 
۴ لكتابةشي ءأسفل الصورة؟ 


< ذل / >أكتب اىشىء نحت الصورةهنا< "ءsءەلc1ass="d >d‏ 


وبهدا انتهينا من معرض الصور 
مثال عملي : أضغط هنا 


٤‏ كيفية عمل السلاید شو: 


طبعا السلايد شومن أروع الأشياء التي تلفت الانتباه وتعطى انطباع رائع للموقع 
والبرمجة المستخدمة فيه › حقيقة يوجد الكثير من السلايد شوالمختاعة التي يمكن 

استخدامها ومن الأروع دمج مكتبة ادإ ۲© ٩1‏ ز الراثعة معها لتضف لمسة رائعة 

على السلايد شووراحآعيطك أفضل أنواع السلايد شووشرح كيفية استخدامه 


أولا: جميع ملفات السلايد شو مرفقة أضغط هنا 
ثانيا: لرؤية مثال عملي لاسلايد شو أضغط هنا 
لاء كيضيةالاستخدام؟ ` 
ولا : افتح ماف الاند کس ]۸ 1۸٣ ۵٥×.‏ وراح تجد الکود الاتى 


DDL 


با لصمجه : 


<ul> 
<li><img alt="abc defrg thysu ooip jkifbtg fff" 
src="http : //www .mtwer.com/vb/images/cortina_gray. jP 
g" /></1i> 
<li><img alt="abc defrg thysu ooip jkifbtg fff" 
src="http : //www .mtwer.com/vb/images/cortina_ heaven. 
jpg" /></1i> 
<li><img alt="abc defrg thysu ooip jkifbtg fff" 
src="http : //www .mtwer.com/vb/images/cortina_hel1l. jp 
g" /></1i> 
<li><img alt="abc defrg thysu ooip jkifbtg fff" 
src="http : //www .mtwer.com/vb/images/cortina_ leaf. jp 
g" /></1i> 
<! -- eccetera --> 
<li><img alt="abc defrg thysu ooip jkifbtg fff" 
src="http : //www .mtwer.com/vb/images/cortina_olive . j 
pg" /></1li> 
</ul> 
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بهذا نكون انتهينا من هذا الدرس المطول 
المطلوب منك : 
١-عمل‏ صورة كخامية صفحة 
۲-عمل معرض صورخاص به 
عمل سلاید شو خاص به 
وأرجومنك التطبيق وحاول تكتب الاكواد بأيد ك وتعرف كيف تعمل فواللّه الذى لا 
اله إلاهوآنا تعلمت هذا بعد عناءوتكراركثير وأنا في هذه الدورة بقدم لكم 
الخلاصة مما تعلمت 
تنبیه مشاریع هذاالدرس : 
جميع الأمثلة والأكواد التي تم شرحها في الدرس مرفقة في الموضوع 
١-ملف‏ تغيير خلفية الصفحة وعمل خفوت على الصورة 
ماف معرض الصور 


۴-ماف السلايد شو 


شرح التعامل مع الأزرار والمؤشرات والتأثيرات المختلفة عليها 0 JG‏ 
في هذا الدرس راح نتعرف على كيفية عمل تأثيرات على الأزراروالمؤشرات 
أولا: لابد أن نعرف في ال 55 المغا هيم الآتية :- 


شكل اللنك في حالته الطبيعية ٣k‏ ذ1:ة 

شكل اللنك الذى تم زيارته td‏ ذa:v1s‏ 
شکل اللنك عند مرورالماوس عليه ٥١‏ 7٥ط‏ :ھ 
شكل اللنك عند الضغط عليه ١ء7‏ 1غa:ac‏ 


۾ *۹ + 


ولابد أن تعرف أن لاید أن ٣٥۷٥۲‏ أن تأتی بعد ٣۸‏ 1) و d‏ ع آ۷ ولا یچوزان 
کودك مبتدأب ۸0۷٥۲‏ بدون ما تبدا ڊd‏ ع اءآ۷, )٣1ا‏ 
وکودها هو : 
کود h٣‏ : 


<ul> 
<li><a href="#">iسıأئرلا‎ </aھ></1‎ 1> 
<li><a href="#" >gyuill</a></1i> 
<li><a href="#" >رgصئ|‌موپلا< 1/<<ھ/‎ 1< 
<li><a href="#" >gيديفئلاڈبتکم</ 1/<<ھ‎ 1< 
<li><a href="#'" >liڊ‎ Jصت|ل<‎ /aھ></‎ 11< 


۰ 


:٤55 وکود‎ 


ul 
{ 


list-style-type:none; 
margin: 0; 
padding: 0; 


overflow:hidden; 


float:right; 
} 


a:link ,a:visited{ 


display:block; 
width: 120px; 
font-weight: bold; 
color:#fffffEf; 
background: #36004e; 
padding : 4px; 
text-align: center; 
text-decoration: none; 


} 
a:hover,a:active { 


background: #922ebf; 


لاحظ أن حددنا الخاغية ل 02K ۲01١‏ للزرفي الجالة العادية )1| و أ Visi‏ 
باللون البنفسجي baCck$r0°U^d:# 36004٥‏ 


وأننا حددنا في حالة الزرعند المرورعايه با ماوس ۸0۷0۲ وعند الضغط عليه 3٥1۷٥‏ 
باللون الوردي 5۴ baCk$r0U^d:#922€‏ 
وبقية الكود فيه اشياء مهمة ايتا : 


1i 
{ 


float:right; 
} 


جعلنا للست 5 آ) ( القوائم ) آمرالطفو للیمین حتی یکونوا کلاعای جانب بعض ولیس على 
هينة قا ثمة مرقمه با لطول وحددنا في الكود عرض الزر ۷10١‏ ومجاذاته عن الزرا جاور 
5م وإ ظهارالقا نمة على هينه بالوك ))2( وبهذا يمكنك تطبيق ذلك على ایزر 


تريده اعرف الفكرةوانطاق بعنانك 


بل يمكنك الإبداع بنضمك وان تستخد م الصوركخاغية للأزراربد ل الألوان 
کالاتی : 


background: #E£45322 ur1 ( ' رابط الصورة‎ ' ( no-repeat; 


ولابد أن تراعى الد قة في مقاسات الصورة وان تكون مقاسات الصورة الافتراضية لازرهي 
نفس مقاسات الصورة عند مرورا لاوس ( المثال بالمرفقات ) 


المطاوب: 
عمل قانمة تتغير لونها للأحمر بمرورا اوس عليه 
ويفضل انك تسوى ها لكود من الصفروبنضسك 


تعريف بمكتبة رهز قبل البدء في التعامل معها 


أولا: تعریف بمکتبة ا1۲3٩‏ ز: 


العا ز: هى أحدث المكتبات البرمجية التي تستجد مها أآشهر المواقع على الويب 
كجوجل والوردبريس...الخ »وهى عبارة عن لغة الاجاكس ×1 [ه ولكن عاى هيئة مكتبة 
جاهزة يمكنك استخدامها مباشرة دون الجا جة لكتا بة كود الاجاكس من الصفر »ولكن كلامي 
هذا لا يعنى ان هذا الأمر بهذ ه السهولة فا لمكتبة التعامل محها صعب لأي مبتدأ لم يسبق 
التعامل معها »أولا يعرف كيف بستخد م ×1[ والصعوبة نكمن في كيفية معرفتك لان 
تستغل هذه المكتبة لتخرج منها التأثيرات الخيالية التي تفعاها هذه المكتبة الرائعة: 
سؤال: اذا تفعل ال۲٥‏ ا »ورينا أمثاة حية؟ 


ال۷٣‏ عا أعتقد آنها لا تخلو من اى موقع فيه برمجية داخليه : 
خلونا نأ خذ مواقع ونشوف أين استخد مت ادإ 1€ا): 
-١‏ موقع مطور: عند ما تقوم باضا فة رد على الموضوع »فا نه يضاف اوتوما تيكا دون تحميل 
الصفحة »انها الاجاكس × زه اونقول إ٣‏ ٥۹ز‏ 
۲-موقع جوجل : عند ها تذهب لأدوات اللغة › عندما تكتب كلمة ليترجمها المترجم › 
ستلاحظ انك بمجرد كتا بتك حرف واحد راح يتم إعطا نك ناتج الترجمة بدون حتى ما 
تضغط على زرالترجمة »انها الاجاكس ×2 زه او إ٣‏ عuا¶۹ز‏ 
٣-موقع‏ اليس بوك: تلاحظ انك عندها تحب تكتب موضوع فانه ينزل على صفجتك دون 
نحمل الصفحة ›وأیضا خاصیة ٥۴٥۴٤٥۹۵5۵٤)‏ ۷[] ›فانھا تستد عی کل جد ید بین 


أصجابك وتدرجه في صفحا تك بدون تحميل الصفحة »أنها الاجاكس 


DD 


با de‏ -ھ Vîst‏ باسلاا/اام على قوتها ھا لمكتبة 
واعتقد لو جاست لاصباح ومسكت موقع راح تجد ان كل موقع مستغل المكتبة بشكل مختاف › 
والخبرة ترجع لمن يعرف كيف يستغلها وعنده كل أساسيات استخدامها البرمجية 
سؤال: من ين أتعلم اراز ؟ 
أعتقد أن موقعها الالكتروني هو أفض شي ءراح تتعام منه فا لموقع رائع بمعنى الكلمة فهو 
يشرح لك كل دالة أو كود ويعطيك مثال عملي في نفس الصفحة لتعرف تأثير هذا الأمر 
سؤال: هل آنا قارىئ الدورة راح أواجه صعوبة في التعامل معها كوني مبتدأ لا أعرف حتى 
کیف یکتب کود ۸٣‏ کا مل علی بعضه ؟ 
طبعا هذا السؤال أكيد يريد يعرف إجابته »ولكن دعني أقولك انك لا تقاقك لأني 
سا عطياك الخلاصة وكيف تستخدم تا ثيرات المكتبة 1٣۷‏ [ دون الحا جة لان تكون 
محترففي التعامل مع المكتبة . 
ولكن يجب أن تعلم أن هذا لن يعطيك قوة الإبداع والابتكارفي التعامل مع المكتبة لأنك راح 
تعرف وظا نف محددة فقط ولن تستطيع أن تعطى لعنا نك الانطلان في التعام مع هذه 
المكتبة لذلك انصح لن يريد التعامل معها أن يبدأ من موقعها الالكتروني . 


سؤال: ماذا يازمني كعضو منتسب للدورة أن اعرففي ۲۷ ٥٩ز‏ 
أنا راح أشرح أساسيات خفيفة الجبن لابد أن تعحرفها على الأقل : 


: ٤55 لإدراج ملف المكتبة »راح يكون بالضبط مثل ٠ا يندرج ماف‎ -١ 
مثال:‎ 


<script 


src="http://ajax.googleapis.com/ajax/libs/ jquery/1. 
2.6/jquery.min.js" type="text/Javascript"></script> 


لاحظ أن المكتبة مرفوعة على سير فرات جوجل »ويمكنك نحميل ماف المكتبة وتنز يله على 
جهازه والإشارة إليه 
مثال: 


<script src=" jquery.min. js" 


type="text/javascript"></script> 


ملاحظة: المكتبة عبارة عن ماف بسيط بامتداد ١ز‏ فقط › يعنى لا تتخيل المكتبة كتب وهكذا 


۲-لابد أن يتم كتا بة آوامرالاجاكس والتعامل مع المكتبة بين وسمى أآ 5٥٣‏ بين وسم اذ 
head‏ 
مثال: 


<head> 
<title></title> 
<Kkkxk xKkKkkkkkKxXxXKK*'"Content-Type" 
content="text/html; charset=UTF-8"> 
<script type="text/ javascript" 
src="http://a]jax.googleapis.com/ajax/libs/ jJquery/1. 
2.6/jquery.min. js'"></script> 
<link rel="stylesheet" href="css/default.css" /> 


<script type="text/javascript"> 
$ (function () { 
$ ('#submit') .click (function () { 
$ ('#container') .append ('<img src="img/loading.gif" 
alt="Currently Loading" id="loading" />'); 


$ ('#name') .val () ; 
$ ('#email') .val () ; 
$ ('#comments') .val () ; 


var name 
var email 
var comments 


$.ajax({ 
url: 'submit_to_db.php', 
type: 'POST', 
data: 'name=' + name + '&email=' + email + 
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' &comments=' + comments, 


success: function (result) { 
$ ('#response' ) .remove () ; 
$ ('#container') .append ('<p id="response">' + result 
+ '</Pp>'); 
$ ('#loading') .fadeOut (500, function () { 
$ (this) .remove () ; 


})7; 


} 
})7; 


return false; 


})7; 


}) 7 
</script> 


</head> 


۴- طبعا بالنسبة للغة نضسها الاجاكس » فيكتفي على مستوى الأعضاء هنا أن اشرح لكم 
التأثيرات جاهزة وكيف تستخد مها مباشرة وان شاء الله في الدورات القادمة › فقد يكون 
هناك دورة برمجية للأجاكس 


یں 
شرح التعامل مكتبة را٥٠‏ ز وعمل التأثيرات الرائعة لوقعحك مطو J‏ 


نبد الآن نعرف كيف راح نستخدم ونستغل التأ يرات المخاتغة للمكتبة دون الخوض فى 
طلاسم أكوادها البرمجية »رغم اني حزين من ذلك ›»فكنت أود ان اشرحاكم اذ 
وكيفية التعامل معها برمجيا »وهذه كانت نجتاح لساسة دروس فيد يو › لذلك نكتفى 
بمعرفتك بتأذيراتها المختاغة وكيف يمكنك إدراجها في اى موقع تريد اضافة لسات 
اد له : 
انظر للصورة لا خذ أهم التأ ثير ات المختاعة للمكتبة وكيف راح نستخد مها : 


jQuery 
شرح استخدام مکتیۂ راع وز فی تصمیمكف‎ 


سرض مكبر للصورة اظضار مربح متطلبات بمجرد رور الماوس 


jquery tooltips image hovering 


تضريك صورة فى الصفحة ادراج ای بيانات لقاعدة السسانات 
jquery autoinsert to DB image animation‏ 


اضافة وازالة عضر , 
دورن تضصيل الصفحة مرة اخرى 
add & remove without‏ 
reloading page‏ م اي 
mlueor Tren‏ 


wista-design 


نبدأ على بركة الله : 
\-كيفية عمل عرض مكبر لاصورة ڊ ٩10۲‏ [: 


كيفية الاستخدام والتحد يل : 
افتح ماف ا٣۸ ٣, 1٥×.‏ : وراح نجد ھا لکود: 


<a href="one.jpg"><img src="oneTN. jpg" alt="image" /></a> 
<a href="two. jpg"><img src="twoTN. jpg" alt="image" /></a> 


<a href="three. Jpg"><img src="threeITN. jpg" alt=" image" 
/></ a> 


كل ما عليك هو تسوى صورة بمقاسين :٠-صورة‏ مصغرة ۲-صورة مكبرة 
الصورة المصغرة : 


الصورةالمكبرة لها : 


الصورة المصغرة هي الطبيعية اللي راح تظهر بدون مرورا لاوس وراح يكون مسارها في هذا 
الكود بفرض أخذ نا الصورةالأولى من الكود : 


<img src="oneTN. jpg" alt="image" /> 


وراح تكون الصورة المكبرة هي التي راح تظهر بمجرد مرورالماوس : 
وکودها راح یکون: 


<a href="one. jpg"></a> 


طبعا الطريقه سهله . 
۲- إظهارمربع منطابات بمجرد مرورالماوس: 


من الطرف الرائعةفي ل۲ ٥٠ا‏ ز »فتخيل انك بهذه الطربقة يمكنك بمروراماوس على 
كلمة واحدة »أن تقوم يا ظهار مقال كامل بدون تحميل الصفحة . 


شاهد مثال عملي :أضغط هنا 
( كيفية الاستخدام والتعد يل ) راح تجد في كود اد× 2 زه:؛ ها لجملة : 


html += مقال عن كيفية الكتا بة التلقائية<14>'‎ >/ 4 <' 
html += '<img src="image. jpg" alt="image" 
/>'; 


هذاالمقال يتحدث عن كيفية عمل عرض لقال بمجرد مرورا لاوس على <م> ' =+ html‏ 
P< '‏ />زر 


لاحظ كل جزء من الكود وشوف الصورة الآتية حتى تعرف التعد يل الخاص بها : 


مقال عن كيفية العتابة التقانية ماك هرهق الس ا 


الزر 
h4‏ 
ا 


المقال <img>‏ 
صورة المقال 
| سے قی کود ال عاوز 


۳-إضافة عنصر وإزالته من الصمجة دون نحمياها : 
مثال عملي لا يتاج لشرح : أضغط هنا 


٤-إضافة‏ اى بيانات لقاعدةالبيانات : 
هذه الطريقة نجتاج لتعا ملك الجيد مع هك" & م ٣م‏ لذ لك راح أشرحها في درس 
لاحق بأذن الله خارج الدورة لان فيها كلام كثير لازم آتكلم عنه بهذا نكون عرفا واستمتعنا 
مع مكتبة ۲٥٠ا‏ ز التي لها خصا نص رائعة جد ١١ا‏ لا يسعني الوقت لأشرحها 
بالتفصيل 
ماجحوظة: ماغات الدرس مرفقه 


المطاوب: 
طاب واحد مجمع من الدروس السابقه: 
المطلوب: عمل عرض مكبر للصور( لأريع صور) + مع توسيطها فى نفس الصفحة ووضعها 
فی مربع حدوده ×١‏ وإرفان الماغات 


تنبيهات + التخطيط الشامل + نصائح قبل تطبيق الدرس 


ننتقل الآن إلى أقوى وأ طول درس راح تشوفه على النت ياذن الله ءتم تجهيز هذا الدرس في 
۸أيام متواصلة بمعدل ۵ ساعات يوميا أكذر من تصميم الموقع نضه اللي راح ننكلم عنه 
الدرس راح يكون مَطول › لذ لك لابد من قراءة الدرس مرةواثنين وثلاثة وبتركيزشد بد 

والدرس مقسم خمسة أجزاء: 

. التخطيط لاموقع وتحد يد المطاوب فيه‎ -١ 

۲ التصميم والتقطيع للموقع على الفوتوشوب. 

۴- ماغات الموقع وصفجا ته ۸)1 وشرح آکوادها با لتفصیل الممل ٥۲۷+‏ ٩ز‏ 

۳- ماف اذككح الخاص بالموقع وش ر حه با لتفصيل الممل . 

۵-المثال العملي ونجربة الموقع الذي تم تنفيذه بحمد الله 


تنبیهات هامه جدا قبل تطبيق الدرس: 


١-الدرس‏ لابد من قراءته مرةواثنين وعشرة وعدم التسرع في التطبيق إلا قبل فهم كل 
جزءيامعان. 
-الدرس ليس لتعليمك مهارات الفوتوشوب › فتطبيقك لابد أن تكون على دراية باستخدام 
الفوتوشوب »وهذه لها دروس منفصاة خارج الدورة يمكن التعلم منها. 
۲-الدرس راح تستفيد منه حركات جد يدةفي الغوتوشوب. 

-٤‏ الدرس لا يهمنى فيه أن يكون النا تح النهائي لتطبيق دقيق › لكن ما يهمنى أن تضم 
الفكرة فقط فالاحتراف لن يأتي من درس واحد فلابد من التطبيق وأعمال أكثر من 
ملاحظه أخيرة : فكرة الدرس مقتبسة من احد مطوري الويب الأجانب وهذا هو معرفه على 
devian art gy‏ 


وهوشخص مجترف جدا ويعمل بأحد الشركات الكبرى باله5لا وعجبنى طريقة تصميمه › 


وأحببت أنأتعلم منه › لأنه أقل ما بقال عنه انه ٥٣21‏ کک ۴٥۲م‏ ترقبوا الدرس 
وأجزاءه بأذن الله . 


q9, 
e 2.0 التخطيط الشامل لبرمجة وتصميم موقح بإسلوب‎ 


اول عغاصر الموتح المطوب تنفذهشا: 
- مستطيل أعلى الصفحة يشمل : خانة تسجيل الد خول_-لنكات -مخرك البخث بالموقجح 
-الشيد ر : ويشمل لوجو وعضوان الموقح 
المحتوى: ويشمل أزرار الموقج رالفوانم المتحركة) 


مةه الموقح ررسالة التر خسب) 
-السلاید شو 


-الفوتر: لكتاية الحقهق ....الخ 


HTML CODE 


div id 
status div idl 
header div idl 
div id 
tabs div id 


message 
| slideshow 
| div id 
div id footer 


1 
conten div id wrapper 


div id topshad0W‏ قوقە 


ottomshad0Wwاb div ¡id‏ غه 


بعل لور 
nmluer Trem‏ 
vista-design‏ 


تطبيق كامل لتصميم موقع احنزافي الجزء الأول التصميم 


التصميم والتقطبع للموقع على الفوتوشوب 
نبد أ على بركة الله 
أولاً قبل كل شي ء : لابد أن تعود نضسك في جزء من هذا الدرس على كثرة التطبيق قبل 
إنتاج الناتح النها أي لأنك لازم تثق انك راح تخطي ء مره واثنين وعشرة قبل أن نجيد كل 
نقطة با لدرس وأنا نسي فيه بعض عدم الاحترافية »وقد أكون لم أغطى بعص النقط في 
شرح الدرس بحكم أن الدرس يمكن من أطول الدروس اللي كتبتها على النت للان منذ 
٣‏ سنوات منذ تعاقي بموضوع تطویرالویب 
قبل تطبيقك : سوف یکون النا تح النها ئي ماف ۵٦م‏ بالشکل الاتی ١‏ - 


& template 12. psd ® 33.3% ,الخلغي(‎ RGB/) El) 
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أولا افتح الغوتوشوب وقم بعمل جد ید بمقاسات ٠٠٠١‏ في ٠۲٠١‏ بكسل 


: | untten-2 ااا‎ 


LiBlEtE PFESEI 


Image Size! 


4.د 


ا 
pixels‏ لال1 | ¦ 
pixels‏ 1200| : 


ےر 


اا 


select predefined settings For new documents 


RGB Color ll» | | 8 bit ۳ 


Transparent | 


Name 
Preset: LuUSTOM 
#Yidth 


Height 


Resolution: 


Lalor Mode: 


Background Lontents: 


ا 
ا 


Adyanced 


قبل المباشرةفي العمل › لابد أن يكون شغانا منظم ودقيق لذ لك سنجتاج لاستخدام المسطرة 
في الغو توشوب اختار ۷1۷۷ من فون ذم ۵۲١‏ ]١٠ا۲‏ ولا تنسى أن ذختارمقاس المسطرة 


ا ا 


Rulers: ا‎ 
Type: | points 24 
Lalumrn Size 
Wyidth: 180 paints 
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PointJPica Size 
(® PostScript [72 pointsfinch]} 
O Traditional (72.27 pointsfinch) 
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ثم سنقوم باستخد ام المسطرة بعمل خطوط إرشاد ية في تصميمنا قم بعمل خطوط إرشاديه 
بالضبط مثل أنا مسوي 


للاسفل 


لليمين 
Ê qê‏ 


نبدا من الآن بعمل شغانا أولا: تصميم القانمة العلوية 52۲ كuااهاك‏ »٠اختارأداة‏ رسم 
مستطیل ۲٥۴٣۵۸31٥ ٥٥1‏ ثم ارسم مستطیل في الأعای بطول ۵۰ بکسل شوف 


3 template 12.psd & 100% (Shape 1, RGBIB) 
سس ا ت ل ا س ل ا ا‎ 


A FLEE gef 


1۷ web 0.2 دورة‎ 


ثم باستخد ام أداة التدرج 0٥)‏ ١ع‏ ل9۲2 سنقوم بعمل تدرج لهذا المستطيل قم بعمل 
لیر جد يد ذم ۾ بد create clipping Mask Jaaڊ la‏ 


Select Similar Layers 


Merge Yisible 
Flatten Image 


® n 
أا‎ Layer Û ۳ 
ثم قم بعمل التدرج‎ 


J - E E |) =| + Madea: [Hormal ٤ 3 pacity! | | 1006 | | [LlFRswerss [#[ Githar [ 


0 template 12.psd &ã 66. 7% (shadow, RGB/S) 
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بعد ذلك سنقوم با لكتابة على هذا الشريط العلوي 52۲ كلاأهاك 
ملاحظه هامه : في التصميم سوف تلاحظ آنا سوف نكتب كامات وأشياء كثيرة لكن عند 
الانتقال لدرس الأ" ٣"‏ سوف تكون هذه الكلمات في ماف ٣١١)‏ الخاص با لصفجة ولیس 
مجرد كامات مكتوبة على الصو ر حتى يسهل تغبير ها لأي كلمات فيما بعد لذاوجب التنبيه › 
نقوم الآن بكتا بة كامة الترحيب شوف عند الخط الإرشادي ٤٠١‏ اكتب كامة الترحيب 


& template 12. psd @ 100% (بızرî,‎ RGB/8) 


مرخبابك 


بعد ذلك سوف نقوم بعمل مستطيل خاص بالأزرارالثلاثة, - 
دخول - خريطة الموقع -الاتفاقية 
قم با ختیار آداة رسم مستطیل ذو حوافدائر ية |00 rounded rectangle‏ 
ثم ارسم مستطيل من أول الخط الإرشادي ٠٠١‏ إلى الخط الإرشادي ٠٠١‏ 


Ft 7| Û template 12. psd &@ 100% دخول | خريطة(‎ , R6G8/8( 
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mm Rectangle Tonal ا‎ 


ر 
rile TCI‏ ا Rectangle Tool‏ = 


3 Elips 


a il LATE ES TCT‏ 5 اد 
اختارآي لون › فانا لا يهمنى جمال التصميم الآن بقدرأن تفهم الفكرة لا تنسى الخط الفاصل 
بين الكلمات الثلاثة يمكنك عمله بضغط ۴ك + الزراللي بجانب زرالمسح 
ack spa c٤‏ فون ۲٤۸1ع‏ وشوف الجن الطبقتبن الخاصة بهذا المستطیل : 
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اتا 
Layers “ahannels paths 5‏ 
parmal__ Î] opacity: 100s‏ 


ek: O 27 FF & Fill: | 10036 
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FTE Eg LOFT ا‎ 


Layer Style 


Inner S$hadoyڊ‎ 


Styles 


Structure 
Blending 2Gpktians: Default Blend Mode: Multiply أ ا‎ 
[J] Crop shadow Dparity: 73آ و‎ 3 


Inner Shadow 
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LI Texhre Quality 
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Zolar Overlay 
Noise: ğ— ت‎ ¬ HF 3 
[Ll aradient Swerlay 
[[Fattern Gwerlay مسق و‎ 


rude reyra 


VA FEA des gn 


Strole 


Layer Style 


Styles - $troke 
Structure 
Blending Options: Default ےک‎ 
LI Grap shadow Position! | tsi ۷ 
Inner Shadow > 1 
i Blend Mode: orrmal ا‎ 
gjker Slory E 
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[J] BBwel and Embass Fil Typeset Color |» 
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[_[ Texture 
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[Pattern Swerlay 


Stroke I 
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Apply stroke Effect mude rern 


iSTa-dssiqgn 


۷٠ Web 0.2 دورة‎ 


الآن انتهينا من هذا 
نکمل الجبن نسوی مستطیل البجث أولاا ختار)00] ٥2اک 0٥۳‏ اکا لنقوم بعمل 
صورة مكبر 


8 
ور 7 
aa‏ 5 
EÛ SIE A ASSET‏ @ 
ا 
e‏ 
4 
jE‏ 
ويا ختيار نض الأداة السابقة )00 عاو rounded rec†a‏ قم بعمل مستطیل 
وأضف له بعض الا ثيرات 


ayers “ahannels paths 


# | pacity: 10094 


Fill: | 1003é‏ کک ت 1 لاہ 


انتهينا الجبن من الجزء العلوي › ننتقل لاجزء الموجود أسف الجزء العلوي وهو ال۲ عل 2ع" 
قم با ختيارأي صورة ذم أجباها للضوتوشوب ثم قم بنقاها لصفحة عملك اللي أنت شغال عايها 
حالیا وقم بتنسیق طولها باستخدام +٤‏ )۲] بحيث تكون بداية الصورة 


۷۱ web 0.2 دور‎ 


عند الخط الإرشادي 0١‏ ونها يتها عند ٠٠١‏ ولاحظ أن طبقة هذه الصورة سوف نقوم بعمل 
create clipping mask‏ لاچزءالعلوي 


| Ê template 12.psd 2 100% (Layer 3, RGB/8) 
ا ا ا‎ 
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8 Web 0.2 دورة‎ 


ثم سنقوم با لكتا بة عليها عند الخط الإرشادي ٠٠١‏ 


اکس ا ا ا 
مرجبا بك 


کي - 
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ا‎ [shape 4 copy 


Layer 4‏ ا ل 
ADVPHP COM r‏ 8 
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تمام الحين انتهينا من الهيدربكل سهولة »ننتقل لاجزءالأهم وهو المجتوى 0١€‏ 
سو نقوم برسم مستطیل باستخد ام الأداة )00 ٥)و٣ھ‏ ا٥۲‏ ولکن قبل الرسم قم 
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8 ع و ی - 
ثم قم برسم الخطوط الإرشاد ية هذه أبتا حتی نحدد حدود كل شي ء شوف هذه الصورة 


e amo Sa a Sem aT oa aT So ONE SSE amu Se om 
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rde lT FeFr 


VEL CE a SE gn 


في مربع السلايد شوالخاص بعمل عرض سلايد شواجاب أي صورة »وقم بتثبيط مقاساتها 

بحيث تكون أبعاد ها داخل الخطوط الإرشاد ية اللي قمنا بعماها في الصورة السا بقة والجبن 
سنقوم بعمل لير جد يدة وراح تكون خاصة بعمل مستطيل ليعرض لنا 

تعريف لاصوركتا بيا »اختارأداة )100 rounded reca ٣)٥‏ وارسم المستطيل 

ثم باستخد ام ٥۸ 21 ٥٥)‏ رادم وجعل الجوانب ٣‏ قم برسم مثاث بحیث یکون خاص 

بعمل السابق والنالي للصور 


سار اشر ای بف ۲۷ ۸ L0‏ 


O UN ان‎ TTT : 
: x نظام اقلم اسيع ام‎ Layers “Ehannels paths FT 
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VPHP.C0M‏ ۸ لقعلیم البرمجہ ب 


منیا دور 2 اال شري 
اا و و ۴ تھا ایا ار 
TFista-des ign‏ سے 


ننتقل لعمل الأزرارالرئيسية للموقع »سوف نقوم بعمل مربعات حتى تكون عبارة عن آزرار 

الموقع قم باستخدام أداة )ا00 عاو ه]اءع۲ برسم المربعات الآتية ولا تنسى أن تترك 

مسافة بسيطة بين كل مريع ولا تنسى أيضا أن تقوم بعمل خط إرشادي حتى تكون الأزرار 
علی عرض واحد یمکنك تکرارالطبقات بعمل [+)۲]› 


Vo web 0.2 دور‎ 


ملاحظه : في أول زرعلى اليمين لو ليك خبرةفي الفوتوشوب يمكنك استخدام 
آداةالامت ۸٣عم‏ لجذف حدود آي زرشوف 


Anchor Point‏ ا 


Lreate wector rnask. 


Delete vector mask 


YPHP.COM 


Define Custom Shapë,.. 


Make Selection... 
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المهم › بعد رسم الأزرارراح يصبح الشكل كالأتي:- 


۷٦ web 0.2 دورة‎ 


PHP.‏ لقعلیم البرمجہ 


2 ميك معطو‎ 
rnlurer droit 


FisTta-des3ign 


بعد عمل هذه الأزرارقم بتجميل لير كل زرفي مجاد واحد 


ثم بعد ذلك قم با لكتابة على كل زر »وإضافة زرالسابق والتالي كما فعلنا سابقا 


Web 0.2 دور‎ 


ا کے 


n نيل طور‎ 
due CCFL 


TIisEa—-design 
تبقى لنا الغوتر »قم بعمل خط إرشادي ثم اختارأي صورة مثل ا سوينا في الهیدر بالضبط‎ 
وضعه في أسط التصميم‎ 


أخرشي ءسوى خافية للصفحة وذلك بعمل لير جد يدةووضعها أول لير 
( يعنى أول لير من أسطل ) وقم بجعل لونها ابيض يميل إلى الرصاصي برقم 31۴3# ؟ 
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بهذا نكون انتهينا من هذا الجزء تا بعوا بقية الدرس إن شاء الله . 


۷۹ web 0.2 دورة‎ 


تطبيق كامل لتصميم موقع احنزافي الجزء الثاني اللصاط 


نستكمل معكم إخواني الكرامأجزاء درس تصميم موقع كامل كتطبيق للد روس السا بقة وراح 
يكون هذا الجزء خاص بكود صفجة الموقع ]۲ الدرس راح يكون مطول › لذ لك لابد من 
قراءة الدرس مرةوائنين وثلاثة وبتركيزشد يد . 


نبدأ على بركة الله : 
أولا: التخطيط للموقع وتحد يد المطلوب فيه . 
دائما تعود عزيزي »انه عندما تريد أن تقوم بتصميم وبرمجة موقع ان تضع في مخيلتك 


الفكرةالتي تود عماها في الموقع ونحدد المتطابات اللي راح أسويها › وأحفظ أني راح أسوى كذا 
وکذاوکذا.....٠لخ‏ 


وأيضا احضرورقة وقام وقم برسم شكل تصويري لفكرة الموقع اللي راح تسويه قبل المباشرة 


في العمل »ومن منطاق هذا الكلام › راح أضع لكم مخطط الموقع الاجى راح أسويه ياذن الله 
شوف الصورة: 


الفخطيط السامل لبرمجة وتصميم موفح باسلوب 2.0 داعس 


اول : عخاصر الموقح المطلوب تنفيذها: 
- مستطيل أعلى الصفحة يشمل : خانة تسجيل الد خول لكات -محرك البحث بالموفنج 
-الشيذ ر : ويشضل لوجو وعنؤان المؤفح 
المحقوى: ويشصل أزرار الموقج رالقوائم المتحركة) 


-ظمة الموقح ررسالة الترهيب) 
-السلاين اسو 


-الفوتر: لكقابة الحقهق ...الخ 


div id 


div id 


div id wrapper 


اا 
mluer rena‏ 
vista-design‏ 


الصورة تتحدث عن نفسها 


فأنا قمت بعمل تخطيط للأفكاراللي راح نسويها سويا ياذن الله راجع المخطط ثم انتقل 
للمرحلة الثانية من الدرس معي 


ثا لٹا : ماغات الموقع وصفجا ته ۸۲٣٣1‏ وشرح آکواد ها د عونا نبدا بتخطیط الموقع با ٣٤٣‏ 
دعونا نبداً بتخطيط الموقع ب ۸٣١]‏ راح أشرح كود 1١1‏ الخاص با لوقع اللي راح نسويه 
بالتفصيل الممل وعليك كل جزء تتعود تكتبه وتعرف فكرة الكود › بدأ بكتا بة اول كل 
صفحة كما قلنا سا بقا + الترميز وتعريف بالميتا اللي راح بنضع فيها كامات تخص مجتوى 
موقعك حتى تتعرف مجركات البجث على مجتوى موقعك . 
وأيضا نكتب الكامات الد لالية ۴۷/۷0۲۵5 الخاصة بموقعك وتكتب تعريف باسم 
صا حب الكود أوالموقع 21۸07 


شوف الکود: 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional //EN" 
"http: //www.w3.org/TR/html4/loose.dtd"> 
<html> 


<head> 
<k KkkxkkkkkkxK'"Content-Type" 

content="text/html; charset=windows-1256" /> 

<**** name="keywords" content="vista-design, mtwer, 
adرماط‎ , "'برمجة ›تصميم »دعم فی‎ /< 
<**** name="description" conten t=" ةيميلlعنلا موقع مطورالتعليمى للدورات‎ 
!المتخصصة لطورين الويب‎ " /< 
<**** name="author" content="vista-design" /> 
<**** name="robots" content="all" /> 


> ذا‎ K1 ٠< ع /> الموقع الشامل تطبيقا لدورة تصميم المواقع ياسلوب الحترفين‎ 1٠< 
</head> 
<body> 
>! -- الكود الرئيسى للموقع راح كنب هنا‎ --< 
</body> 
</html> 


بعد هذا في ملغات خاصة راع دا ز راح نضیغها بین وسمی ٥‏ )را لاحقا › ننتقل بعد 
هذا للكود الرئيسي اللي راح نقوم بعمله وکل تعاملنا راح یکون بین وسمی ل0( 
ملاحظه : راجع الصورة في الأعلى ثم تاع مرة أخرى معي 


اولأء كهك ل ۷ الخاص بخانة تسجيل الد خول ولنكات الموقع ومحرك بحث الموقع 


أولا: الفكرة 
div ¡Ud status‏ بداخله :1- div ¡d statuscontent‏ : خاص بفورم 
البجث 
1d statuscomman ds -۲‏ ۷آ : خاص برسالة الترحيب + لنكات الموقع 
شوف فكرة الكود : 


<div id="status'"> 


<div id="statuscontent"> 


< ع٥‏ £ / > فورم البجث راح نکتب کودہ ھا ٥11۹<‏ £> 


<div id="statuscommands'"> 
راح نكنب رسالة ترحيب الموقع +لنكات الموقع‎ 
</div> 


</div> 


</div> 


الحین ذرید کتابته کاملاومنسق فسیکون: 
<div id="status'">‏ 
<div id="statuscontent">‏ 
<form action="#" method="post" id="search-form">‏ 
<p>‏ 
<input type="text" name="query" value="èaş" />‏ 
<input type="submit" name="submit" value="Search!"‏ 
>/ 
</p>‏ 
</form>‏ 
<div id="statuscommands'">‏ 


<P id="welcome'" >اgllai‎ , </p> 
<P id="actionlinks"> 
<a href="#" title="Login">لJgèخs</‎ a> 
<a href="#" title=" faqs" >ûlaill< / a> 


<a href="#" title="contactus" >l Jصتl<‎ / a> 
</p> 
</div> 
</div> 
</div> 


<div idA="stat U2" 
AIF iA="sltaluUsContEnt "xz 
Form aACtion="$" method="post" id="search-form"x 
<p» 
input type="text" namEeE="qUEEFY" Talue="t__ 2" ج‎ 
input type="submit" name="supmit" Yalue="Search!™ ر‎ 
f pz 
4 EDEM 
Ai id="statusacormmands 
4p id="welcome "zg wg Nae, p> 
<p id="actionlinksz"z 
<a href="#f" tit le="Login"?* JgZu<f A> 
<a href="#" title="faqfs">ileaıleîl|l<# a> 
<a href="#" tit le="contaCctu3"> li Jصتالک#‎ a> 
ks 
4# Ai 
4# dirz 
2 Ai 


خاصنا من اول 01۷ وهو 21S‏ ا؟ ننتقل لا 01۷ اللى بعد ه شوف صورة المخطط السابق 
وكمل معي . 


فانيا؛ 20۴7ء ¬ ل1 01۷ الخاص باوجووعنوان الموقع. 
الفكرة: 1۴216 ل1 11۷ بداخله : - ۷آ خاص بعنوان الموقع واللوجو 
شوف الکود: 


<div id="header"> 
<div id="logo"> 
<h1><a href="#" title="home">vista-design</a></h1> 


<h2>technology</h2> 
</div> 
</div> 
: وهده صورنه‎ 
ZHI IM "HENE NS 
<Aiy id=" logo 
<hi»><a href="#" title="home"zyista-design</ a></ hl? 
<hEz»teChna loagfyt# haz 
4# irz 
2 iz 


وخاصنا من 11۷ الهيدرومن ثم ننتقل لا۷آ1 اللي بعده 
ا conten:‏ ا vآd‏ الذی یشمل ثلاثة d1۷‏ 


div content-top-shadow -1 
ul id tabs-2 
div id message-3 
div id slideshow-4 


div content-top-shadow gl 
کود:‎ 


هذا ال۷ آل راح نستغاه وراح نقوم بعمل ظل نجمياي فون مربع العرض للمجتوى 
انيا ul id ta5‏ 


<ul id="tabs"> 
<li id="previous'"> 
<a href="#previous" title="Previous">&lt;</a> 
<ذ1/<‎ 
<li id="home" class="current"> 


<a href="#home" title=" Home" >iسأرلl<‎ / a> 
<ذ1/<‎ 
<li id="portfolio"> 
<a href="#portfolio" title=" Portfolio" >ضورal</‎ a> 


<ذ1/< 

<li id="about"> 

<a href="#about" title="About">gژgll <ھ / ٹفز‌‎ 

<ذ1/< 

<li id="contact"> 

<a href="#contact" title="Contact">liڊ‎ Jصتl<‎ / a> 

<ذ1/< 

<li id="next"> 

<a href="#next" title="Next">&gt;</a> 

<ذ1/< 
</ul>‏ 


هذا الاد خاص بأزرارالموقع الرئيسية من الرئيسية والعروض وعن الموقع واتصل بنا › 
وأكيد من معرفتك من ٣)‏ تعرف أن )لا هي خاصة بعمل لست لأي شي ءأزرارمقالات 
ترتیب ....الخ 
فا لٹا : بنسبة slideshow messagedا dvd‏ 
سوف نقوم با حاطتهم فی ۷ل وراح نسهیه ۷۲۹6۲ 


<div id="page-wrapper"> 
<!-- SLIDESHOW --> 
<div id="slideshow"> 
<div id="slides"> 


<a href="#portfolio.work1" ti غ1e=" "شاد التفاصيل‎ 
class="thumb default-slide"> 
<img src=". /img/slideshow/1.png" alt="Flex Engine 
Web Design" class="slideshow-image" /> 
</a> 
| <a href="#portfolio.work2" ti غ1e="‎ لJيصافتلا "شاهد‎ 


class=" thumb'"> 
<img src="./img/slideshow/2.png" alt="Concept Labs 
Portfolio" class="slideshow-image" /> 
</a> 
<a href="#portfolio.work3" ti غ1e="‎ لJليصافتلا "شاهد‎ 


class=" thumb'"> 
<img src=". /img/slideshow/3.png" alt="Everlast 
Studio" class="slideshow-image" /> 
</a> 
</div> 
<div id="slideshow-commands"> 
<a href="#previous" title="Previous" id="previous- 
slide">&l1lt;</a> 
<a href="#next" title="Next" id="next- 
slide">&gt;</a> 
<h4> 
<a href="#portfolio.work1" ti غ1e="'‎ لJليصافتلا "شاد‎ 
1d="slide-title"> 
Flex Engine Web Design 
</a> 
</h4> 
</div> 
</div> 
<! -- MESSAGE --> 
<div id="message"> 
<h3>We build great websites!</h3> 
<p> 


تم افنتاح هذا الموقع لتعليم المستخدم العربى كيفية البرمجة <strong>‏ 
وقد راعینا فی هذا الموقع تقدیم الدروس ياسلوب شيق 
لايجعل القارىء يشعر باللل من قراءةالدروس 
وأتمنى من الله تعالى ان يكون الموقع رسالةسامية 
اجازی بها أمام الله تعالی فى الد نيا والاخره 
اخوکم 
مجم 


<center> vista-design</center> 
</strong> 


</p> 
<P id="contact-info"> 
<span id="phone">+20 10 23 45 67 89</span> 
<span 1id="address'"> 


AV web 0.2 دور‎ 


egypt-cairo<br /> 
vistacompany.org<br /> 


</span> 
</P> 

</div> 

</div> 


طبعا 1۷ الرسا ذل سوف نعرض أي رسا لة عن الموقع مثلاكامة عن عروض الموقع عناوين 
.. إخبار...الخ 


ويالنسبة د0۷ السلايد شوراح يكون مخصص لعرض صورلإعهال الموقع والخ 
أخيراً: نختم كود الصفحة ب۷آ الفوترالخاص با لحقون › مسبوقا ۷آ خاص بظل 
نجمياي كما فعانا سابقا . 
کود: 


<div id="content-bottom-shadow"></div> 
<div id="footer"> 
<div id="footer-image"></div> 
<P id="footer-text"> 
Copyright &copy; 2010 vistacompany.org<br /> 
All Rights Reserved 
</P> 
</div> 
والآن خلونا نشوف كود الصفجة بالكامل بعد تجهيزها.‎ 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Strict/ /EN" 
"http : //www.w3.org/TR/xhtml1/DTD/xhtm1l1- 
strict.dtd"> 
<html xmlns="http: //www.w3.org/1999/xhtml" 
xml:lang="en" > 
<head> 
<ikkk Kitik kkk ¥ K'"Content-Type" 
content="text/html; charset=windows-1256" /> 
<**** name="keywords" content="Roadside, Studio, 
Design, Web, Icons, Logos" /> 
| ><**** name="description" content="Roadside 


Studio is a web design agency that makes beautiful 
websites!" /> 
<**** name="author" content="Felix Boyeaux" /> 
<**** name="robots" content="all" /> 


<link rel="stylesheet" media="screen" 
type="text/css" title="Style" href="css/style.css" 
/> 
<!--[if IE 7]> 
<link rel="stylesheet" media="screen" 
type="text/css" title="Style" href="css/ie7.css" /> 
<! [endif] --> 


<script type="text/ javascript" 
src="js/ jquery. js"></script> 
<script type="text/ javascript" 
src="js/cycle.js'"></script> 
<script type="text/ javascript" 
src="js/slideshow.js"></script> 
<script type="text/ javascript" 
src="js/cufon.js'"></script> 
<script type="text/ javascript" 
src="js/myriadpro. font. js"></script> 
<script type="text/jJjavascript"> 
Cufon.replace('hl, h2, h3, h5'); 
</script> 


<title>vista-design</title> 
</head> 
<body> 
<! -- STATUS BAR --> 
<div id="status'"> 
<div id="statuscontent"> 
<form action="#" method="post" id="search-form"> 
<p> 
<input type="text" name="query" value=" èaq" /> 
<input type="submit" name="submit" value="Search!" 
/> 
</P> 
</form> 
<div id="statuscommands'"> 


<P id="welcome'" >اgllai‎ , </p> 
<P id="actionlinks'"> 


<a href="#" title="Login">لgèخa<‎ / a> 


<a href="#" title=" faqs" >dûlaîill< / a> 


<a href="#" title="contactus'"' >liڊ‎ لJصتl<‎ / a> 

</P> 
</div> 
</div> 
</div> 

<! -- HEADER --> 

<div id="header"> 

<div id="logo"> 

<h1><a href="#" title="home">vista-design</a></h1> 


<h2>technology</h2> 
</div> 
</div> 
<! -- CONTENT --> 


<div id="content-top-shadow"></div> 
<div id="content"> 
<! -- TABS --> 
<ul id="tabs"> 
<li id="previous'"> 
<a href="#previous" title="Previous">&lt;</a> 
<ذ1/<‎ 
<li id="home" class="current"> 
<a href="#home" title=" Home" >iأرll<‎ / a> 
<ذ1/<‎ 
<li id="portfolio"> 
<a href="#portfolio" title=" Portfolio" >ضورal</‎ a> 
<ذ1/<‎ 
<li id="about"> 
<a href="#about" title="About">gژgll <ھ / ٹفز‌‎ 
<ذ1/<‎ 
<li id="contact"> 
<a href="#contact" title="Contact">liڊ‎ صتl<‎ / a> 
<ذ1/<‎ 
<li id="next"> 
<a href="#fnext" title="Next">&gt;</a> 


<ذ1/< 
</ul>‏ 
PAGE WRAPPER -->‏ -- !< 
<div id="page-wrapper">‏ 
SLIDESHOW -->‏ --!< 
<div id="slideshow'">‏ 
<div id="slides'">‏ 
"شاهد التفاصيJ‏ "=1eخ <a href="#portfolio.work1" ti‏ | 


class="thumb default-slide"> 
<img src=". /img/slideshow/1.png" alt="Flex Engine 
Web Design" class="slideshow-image" /> 
</a> 
<a href="#portfolio.work2" ti غ1]e=" "شاد التفاصيل‎ 
class=" thumb'"> 
<img src="./img/slideshow/2.png" alt="Concept Labs 
Portfolio" class="slideshow-image" /> 
</a> 
<a href="#portfolio.work3" ti غ1e="‎ لJليصافتلا "شاهد‎ 
class=" thumb'"> 
<img src="./img/slideshow/3.png" alt="Everlast 
Studio" class="slideshow-image" /> 
</a> 
</div> 
<div id="slideshow-commands"> 
<a href="#previous" title="Previous" id="previous- 
slide">&lt;</a> 
<a href="#next" title="Next" id="next- 
slide">&gt;</a> 
<h4> 
<a href="#portfolio.work1" ti غ1e="‎ لJليصافتلا "شاد‎ 
1id="slide-title"> 
Flex Engine Web Design 
</a> 
</h4> 
</div> 
</div> 
<! -- MESSAGE --> 
<div id="message"> 
<h3>We build great websites!</h3> 
<p> 


تم افتتاح هذا الموقع لتعليم المستخدم العربى كيفية البرمجة <strong>‏ 
وقد راعينا فى هذا الموقع تقديم الدروس اسلوب شيق 
لايجعل القارىء يشعر بالل من قراءة الدروس 
وأتمنى من الله تعالى ان يكون الموقع رسالةسامية 
اجازی بها أمام الله تعالی فى الد نيا والاخره 
اخوکم 
مجمد 


<center> vista-design</center> 
</strong> 


</p> 
<P id="contact-info"> 
<span id="phone">+20 10 23 45 67 89</span> 
<span id="address'"> 
egypt-cairo<br /> 
vistacompany.org<br /> 


</span> 
</p> 

</div> 

</div> 


</div> 
<div id="content-bottom-shadow"></div> 
<div id="footer"> 
<div id="footer-image"></div> 
<P id="footer-text"> 
Copyright &copy; 2010 vistacompany.org<br /> 
All Rights Reserved 
</p> 
</div> 
</body> 
</html> 


تبقى لنا الجزء الأخير وهو كود C55‏ وبعض الجركات في التصميم اللي سويناهفي جزء 
التصميم لننتهي من هذا الدرس ويكون لنا الا تح النهائي إن شاء الله 


تطبيق كامل لتصميم موقع احنزاقي الجزء الثالث والأخير التقطيع+»» © JG‏ 


وفى هذا الدرس سوف نتعحرف على كيفية تقطبع التصميم وماذا راح ذأ خذ منه وماذا سوف 
نتركه »نم بعد مر حلة التقطيع سوف اشرح ماف 055 الخاص بالتصميم »ومن ثم في 
النها ية يكون لنا النا تح النها ئي وهو موقعنا الاحترافي بأذن الله . 
أولاً: التقطيع 
تنبيه : قبل البدء يجب أن تعام أن مقاسات كل جزء راح اقطعه هي متوافقة مع تصميمي آنا › 
وفى حالة كان تصميمك يختاف في المقاسات عن تصميمي ›يمكنك تعد يله من ماف ١ك‏ 
لاحقا وراح اشرح ذلك 


افتح الفوتوشوب على القالب اللي كنا سوينه في الجزء الأول من هذا الموضوع 
-١‏ راح نقطع خاغية البارالعلوي وراح تكون مقاسا ته 1×50 استخدامالأداة 
أ0ا ع ااك لتقطع الجزء هذا »ويمكنك تعد يل المقاس با ختيارالأداة 
الثانية من نض الزر)اهه) ا٣ء‏ )عك عء)s‏ 
R68/8( IE:‏ ,الخ 


EEG | Slice Options 


| Slice Type: image 5 
name: | template 12_U2 
URL: 
Target: 


Message Text: 


Alt Tag: 
— Dimensions - _ 
EHS | 
7: H: | 5U 
Slice Background Type: Mone ا‎ Backaralmel Bolor; 


۲- تقطيع مستطيل مربع البحث ثم بتقطيعه بالضبط بحيث يكون مقاسا ته 
179X24‏ 


: 812 psd ® 200% ,الخلغية)‎ R68 /8[ 


-٤‏ تقطيع المستطيل الخلفي للنكات العلوية أيفا فشن ال »لا تنسى أن تحذف 
اسم اللنكات اللي قمنا بکتابتھا لأننا سوف نکتبها بماف ۸۲٣1‏ 
psd ® — (Shape 1, RGB/8)‏ 


۵- تقطع المستطيل السفلى أسف السلايد الشوأيضا نفس الشيء »لا تنسى أن 
تحذف اسم اللنکات اللي قمنا بکتا تھا لأننا سوف نکتبها بماف ۸٤٣١1‏ 


ت 
فوا فة امز اب فت سف امم أا بو فم مر أا اادد 5 0 Ik‏ 
اقققزم اشرات ات اباب أ1 1١‏ ف1 ايف قل ر 0 | 
TT TTT‏ 4 
bka‏ 

| قن اا ا 
سلا زیر ل ااب رل سال ارتو پا 0 iN:‏ كا ل 
اق ا لقف سي شقان لشي : 1 


-٦‏ تقطيع جزءاللنكات الرئيسية ›لاحظ أن هذا الجزء لابد أن تكون مقاساته 
دقيقه جدا وسوف نعرف لاحقا ذلك 
LAD‏ 
هذه القطعة سوف نحناج لنكرارها › حتى يتغير شكل اللنك بمرورا لاوس لذلك 
قم بفتح عمل جد ید بمقاسات 


Name: | untitled-aÎ [ 
Preset: ا‎ 
#Yidth: En pixels ا‎ 


Resalution: [72 
Lolar Mode: | RGB Color | 


Background Lontents: 


¥) Advanced 


ثم قم بسجب القطعة اللي قمنا بتقطيعها › طبعا بعد حفظ العمل على هينة 
We‏ 0۲ عه لينتج لك الصورالمقطعة وقم بتكرارها مثل الصورة 
الآتية ثم أ حفظها 


اا rrr ® | Dar: 143.2 FANN‏ 
بهذا ينتهي جزء التقطيع واعنقد أنه سهل »ولابد تندرب كثير لأنك لن تنقن 
الموضوع من أول مرة نها ثيا كررمرةواننين وثلاثة لحد ٠‏ تضبط 


۷- نفنتق الآن ماف الوك وشرحه -١‏ 
طبعا آنا قمت بشرح كل جزءفي ماف 55 في کل کود فوقه راح نجد الشرح قم 
بمراجعه الكود بالكامل لتعرف كيفية التعد يل على الجزءالذي تريده حسب 
مقاسات تصميمك الذي قمت بتقطيعه 


@Gimport url ('reset.css'); 
@Gimport url (' typography.css') ; 


body { 
background-color: #f8f8f8; 
margin: auto; 
width: 100%; 
} 


/ * البارالعلوى من خلفية وعمل حد سفلى وتحد يد طوله وعرضة بكامل عرض الشاشة */ 


div#status-bar { 
background: url ('../img/status-bar- 


bg.png') repeat-x; 
border-bottom: 2px groove #ffffff; 
height: 40px; 
width: 100%; 
} 
/ * تعد يد حوف ما بداخل البارالعلوى من البجث واللنكات والترحيب ونحد يد عرضهم‎ * / 


div#status-bar-content { margin: 10px auto Opx 
auto; width: 800px; } 


/ * نخد يد عرض عبارة الترحيب واللنكات من العرض للكلى للبارالعلوى* / 


div#status-bar-commands { width: 400px; } 


/ * عمل فلوت لمستطيل البحث لليمين وتحد يد عرضه */ 
form#search-form { float: right; width: 200px; }‏ 
/* عمل فلوت لعبارةالترحيب باليساروتحد يد عرضه والجاذاةالعلوية* / 


p#welcome { float:left; padding-top: 7px; width: 
150px; } 


/ * تعد يد مستطيل اللنكات من خلفية وطول وحافة ومحاذاةوعرض * / 
p#action-bar {‏ 
background: url ('../img/action-bar-bg.png') no-‏ 
repeat;‏ 

height: 14px; 

margin-left: 200px; 

padding: 8px 28px; 
width: 168px; 

} 


/ * القيام باضافة علامة | قبل كل لنك وبعده* / 
p#action-bar a:before { content: ' | '; }‏ 


p#action-bar a[title="iêliöl'" ] :after { content: ' 
I'7; } 


/ *مستطيل البجث العادى با لصورةاللى سوينها وهذا الكود مهم جدا لاستبدل * / 


۹۷ web 0.2 دور‎ 


form#search-form input [ type="text"] { 
background: url (../img/search-field.png) no-repeat; 
border:none; 
height: 20px; 
padding: 5px Opx Opx 30px; 
width:170px; 
} 
/ * كود مهم جدا لالغاء ظهورزربحث القدیم الاعتیادی ليظهر بد له مستطيل البحث فقط‎ * / 
form#search-form input [ type="submit"] { display: 
none; } 


Header */‏ */ 
/ * كودالهيدرمن خلفية ولونه فى حاله عدم ظهورا لصورة والحافة السفلية وارتطاعه وعرضه * / 


div#header { 
background: url ('../img/header-image.png') no- 
repeat center; 
background-color: #6eb9cc; 
border-bottom: 2px ridge #ffffff; 
height: 250px; 
width: 100%; 
} 


هذا الكود مهم جداوخاص بالل و جوالنصى للموقع ولاحظ شىء مهم جدا ان عرض هذا اللوجو هومحدد كجزومن * / 
عرض الصورة ككل 
وليس من عرض الشاشة التى ترى من خلالها الموقع 
ایان 
800 


ھی 
800 


0 


من 
اللى هوعرض الصورةالاصلية للهيدر 1600 


7 


div#logo { 
margin: auto; 


padding-top: 35px; 
width: 800px; 
} 


/* الجزءالخاص بالحتوى من اللنكات والمقدمةوالسلايدشو‎ * / 
div#content { 
margin: auto; 
padding-bottom: 50px; 
position: relative; 
width: 800px; 
} 


/ * *اضافة من عندى نحد يد صورة الظل العلوى‎ / 
div#content-top-shadow { 
background: url ('../img/content-top-shadow.png' ) 
repeat-x; 
height: 20px; 
width: 100%; 
} 


/ * تحديد اضافة الظ السطلى‎ * / 
div#content-bottom-shadow { 
background: url ('../img/content-bottom-shadow. png ' ) 
repeat-x; 
clear: both; 
height: 20px; 
width: 100%; 
} 


الراب الذى يحيط السلايدشوواللنكات والمقدمة ولاحظ شى ءمهم وهو */ 
overflow‏ 
width‏ 


لابد ان تكون دقيقة حسب مقاس تصميمك 
والاسوف يخرب تصميمك 
/* 


div#page-wrapper { 
background-color: #ffffff; 
border: 1px solid #bababa; 


clear: both; 
height: 233px; 

margin-top: 75px; 

overflow: hidden; 
padding: 15px; 
width: 768px; 

} 


/* السلاید شووسوینا فولت له داخل الراب للیساروحددنا عرضه */ 


div#slideshow { 
border-right: 1px solid #b2b2b2; 
float: left; 
padding-right: 15px; 
width: 375px; 
} 


/ * خصائص الصورالتى تعرض بداخل السلايد ولاحظ ان عرضها هونضس عرض الصورة* / 
div#slides {‏ 
border: 1px solid #a7a7alT;‏ 
height: 200px;‏ 
width: 370px;‏ 
} 


div#slides a.thumb { 
display:none; 


} 


div#slides a.default-slide { 
display:block; 
} 


/ خاص بالمستطیل اسف السلاید شوالذی یظهر به کل کلہة*‎ * / 
div#slideshow-commands { 
background: url ('../img/commands-bg.png') no- 
repeat; 
height: 19px; 
left: 15px; 
padding: 3px 25px; 
position: relative; 
width: 290px; 

} 


/ * خاص بزرالسابق ولاخظ هذا الکود لابد ان یکون دقیق جدا حتی یکون الزر مفعل بمجرد مرورا لاوس عليه‎ * / 
a#previous-slide { 
background: url ('../img/commands-previous- 
slide.png') no-repeat; 
display: block; 
float: left; 
height: 12px; 
margin-top: 2px; 
text-indent: -9000px; 
width: 9px; 
} 


/ نض السابق ولكن التالى * / 


a#next-slide { 
background: url ('../img/commands-next-slide.png' ) 
no-repeat; 
display: block; 
float: right; 
height: 12px; 
margin-top: 2px; 
text-indent: -9000px; 
width: 9px; 
} 


div#slideshow-commands h4 


{ 
margin-top: 1px; 
width: 100%; 

} 


/* اللنكات‌الرئيسيةوالقدمة‎ */ 
div#message { 
margin-left: 410px; 
width: 350px; 

} 
div#message h3 { 
margin-bottom: 20px; 


} 


p#contact-info span { 


display: block; 
} 


span#phone { 
background: url ('../img/phone-icon.png') no-repeat 
Opx 1px; 
float: left; 
margin-top: 25px; 
padding-left: 35px; 
width: 125px; 
} 


span#address { 
background: url ('../img/address-icon.png') no-repeat 
160px 30px; 
padding: 5px Opx Opx 195px; 
} 


/* (اللنكاتالرئيسية (الازرار) مهم جد١١١١١١١اهذا‏ الكود ولابد ان اشرحه بالتفصيل */ 


ul#tabs { 
margin-top: 30px; 
position: absolute; 
right: Opx; 
top: -65px; 
} 


ul#tabs li { 
background: url ('../img/tabs-sprite.png') no- 
repeat; 
float: left; 
height: 35px; 
margin-right: 1px; 
width: 70px; 
} 


ul#tabs li a { 
display: block; 
height: 100%; 
text-indent: -9000px; 
width: 100%; 


} 


ul#tabs li#previous { 
background-position: Opx Opx; 
width: 80px; 
} 


ul#tabs li#previous:hover { 
background-position: Opx -40px; 
} 


ul#tabs li#previous.current, ul#tabs 
l1i#previous:active { 
background-position: Opx -80px; 
} 


/ *العادية الجالة فى الزر*‎ / 
ul#tabs li#home { 
background-position: -80px Opx; 
} 


/ عليه الماوس مرورعند الزر* / 


ul#tabs 1li#home: hover { 
background-position: -80px -40px; 
} 


/ *عليه الضغط عند الزر*‎ / 
ul#tabs l1li#home.current, ul#tabs li#home:active { 
background-position: -80px -80px; 
} 


ul#tabs li#portfolio { 
background-position: -150px Opx; 
} 


ul#tabs li#portfolio:hover { 
background-position: -150px -40px; 
} 


ul#tabs li#portfolio.current, ul#tabs 
li#portfolio:active { 
background-position: -150px -80px; 


} 


ul#tabs li#about { 
background-position: -220px Opx; 
} 


ul#tabs li#about: hover { 
background-position: -220px -40px; 
} 


ul#tabs l1li#about. current, ul#tabs 1li#about:active { 
background-position: -220px -80px; 
} 


ul#tabs li#contact { 
background-position: -290px Opx; 
} 


ul#tabs li#contact:hover { 
background-position: -290px -40px; 
} 


ul#tabs li#contact.current, ul#tabs 
li#contact:active { 

background-position: -290px -80px; 

} 


ul#tabs li#next { 

background-position: -360px Opx; 
width: 65px; 

} 


ul#tabs li#next:hover { 
background-position: -360px -40px; 
} 


ul#tabs li#next.current, ul#tabs li#next:active { 
background-position: -360px -80px; 
} 


/* الفوتر */ 


div#footer-image { 
background: url ('../img/footer-image.png') no- 
repeat center #6eb9cc; 

border-top: 2px groove #ffffff; 
border-bottom: 2px ridge #ffffff; 

height: 50px; 

width: 100%; 

} 


p#footer-text { 
background: url ('../img/content-top-shadow.png ' ) 
repeat-x; 
height: 37px; 
padding-top: 13px; 
width: 100%;} 


مثال عملي : 
في النها ية ›إليكم النا تج النها ني لتصميمنا شا هد الموقع بصورة حية ›انتظر حتى يتم 
تجميل الموقع با لكامل لمشاهد الموقع 


ملاحظه: فيه جزءفي ماف الككء لابد أن اشرحه با لتفصيل حتى تفهم الطريقة 
وهو الجزءالخاص بالأزرارء لان هذا الجزء يجتاج دقة بالغة وبالأخص شرح خاصية 
background-postion‏ 
شوف الصورة : المشروع 
مرفق : أضغط هنا 


y¥ background-postion hover Cn 40px -BÛOpx 
4 الحذف 80 پبگسلل‎ 
الحذق ا0‎ 
سن االيصهن صن اصال ف ا بکسل‎ 
م من الاعلى‎ 
115 من اصل‎ . : 

ليظير زر الرئيسية 

5 اليظهر زر الرئيسية 

باللهن الاسود عتد مروز الماوس 


x background-postion 


BACKGROUND-POSTION: XY 


| البعد الاقفقى 
البعد الطولى 


vista-design 


0 web 0.2 دورة‎ 


۹۷ web 0.2 دور‎ 


أكواد وتأثيرات جاهزة اعتمد عليها في تصميم وبرمجة مواقفعك 0© JG‏ 


وأخيراً قد وصانا لأخر درس في دورتنا وان شاء الله نستمر دانما معكم في تقديم الدورات 
التطويرية هنا في ]ا هذا درس عبارة عن تأثيرات جاهزة يمكنك استخدامها مباشرة 
وأنا راح أضع صورة + لنك كل موضوع خاص بهذا الت ثير تجميعه احتفظ بها 
-١‏ قوائم احترافية,- 
sidebar‏ 
Link ne‏ 
Link Two‏ 


Link Three 
Link Four 


Link Five 


-٣‏ أضغط هنا 


-١‏ لالتقاط كود لون مثل الفوتوشوب 
أضط هنا 

؛- السلايد شوومعارض الصور 
أضط هنا 


I LOVE WWW. VISUAL-BLAST . COM 


Original Article at www.visual-blast.com 


HOTLINKING PREVENTION IMAGE 


NOTE: In case you are viewing this image in yatır online feedreader and you are ımable lû 
s88 An original image PLEASE LET US KNOY to enable images for your feedreader. 
|Contact Us at: hip. viaUal-blasLcenr' contact 


بالتوفيق للجميع 
اخوکم 


vista-design 


وقي الختام مئ أن قدمت لكم كل مفيد وإن شاء الله نلتقي في دورات قادمة بإذن الله 


وصلى الله على نبنا حمد صلى الله عليه وسلم وعلى آله وصحبه أجمعين 


إن كان من طا فمن تفس والشيطات و إن أصيت فمن الله 


وأرجو أن لا تدسونا من الدعاء لى دعوه صالحة 


حقوقالكتاب اللكيةوالفكرية©: 
١-الداعم‏ الرئیسی لاکتاب: موقع مطور 007 .€۲ WWW. ۱) W‏ 
2-تألیف واخراجالكتاب: 91 2-4651 Vis‏ 
3-تجميع وتنظيم الكتاب: العلم نور 


